@import url('motion.css');

/* =========================================================================
   Davi Code · tokens.css
   Phase 1 / Phase 12 — design tokens
   Authoritative source of truth for visual variables.
   Both themes ship. Components must reference tokens, never raw colors.
   ========================================================================= */

:root {
  /* ---------- Brand & semantic colors (HSL raw for tools) ------------ */
  /* Davi Code red-orange — primary action, links, focus.
   brand-500 L=44% is the AA-crossover: white text on the brand color passes
   WCAG AA (4.76:1) AND the brand as a UI element on dark bg passes the
   3:1 non-text contrast requirement (3.98:1). brand-500 is never used for
   body text directly; it's only used for buttons, focus rings, and links. */
  --brand-500: 14 88% 44%;       /* #d23b0d */
  --brand-400: 14 88% 52%;
  --brand-600: 14 88% 38%;
  --brand-700: 14 88% 30%;       /* pressed / strong accent on hover */
  --brand-100: 14 88% 95%;

  /* Cool cyan-blue — secondary accent, code highlights */
  --accent2-500: 200 80% 55%;
  --accent2-100: 200 80% 95%;

  /* Status */
  --success-500: 145 65% 45%;
  --success-700: 145 65% 30%;
  --success-100: 145 60% 95%;
  --warn-500: 38 92% 50%;
  --warn-700: 32 80% 38%;
  --warn-100: 38 92% 95%;
  --danger-500: 0 75% 55%;
  --danger-100: 0 75% 95%;

  /* Dark surface scale (default) */
  /* Formato space-separated (moderno, usado com ``hsl(var(--x))``).
     O wrap ``hsl()`` na chamada falha porque o navegador interpreta
     o space-separated como args adicionais. Por isso expomos também
     ``*--hsl`` com a função pronta — uso direto como
     ``background-color: var(--bg-hsl)``. */
  --bg:           hsl(220 18% 7%);     --bg-hsl:       hsl(220 18% 7%);
  --bg-elev:      hsl(220 16% 10%);    --bg-elev-hsl:  hsl(220 16% 10%);
  --surface-1:    hsl(220 14% 11%);    --surface-1-hsl:hsl(220 14% 11%);
  --surface-2:    hsl(220 13% 15%);    --surface-2-hsl:hsl(220 13% 15%);
  --surface-3:    hsl(220 12% 20%);    --surface-3-hsl:hsl(220 12% 20%);
  --text-strong:  hsl(220 12% 96%);    --text-strong-hsl:hsl(220 12% 96%);
  --text-main:    hsl(220 10% 88%);    --text-main-hsl:hsl(220 10% 88%);
  --text-muted:   hsl(220 8% 62%);     --text-muted-hsl:hsl(220 8% 62%);
  --text-faint:   hsl(220 6% 52%);     --text-faint-hsl:hsl(220 6% 52%);   /* bumped from 44% → 52% for WCAG AA on dark bg (3.70:1 → 5.16:1) */
  --border-subtle:hsl(220 12% 17%);    --border-subtle-hsl:hsl(220 12% 17%);
  --border-default:hsl(220 10% 22%);  --border-default-hsl:hsl(220 10% 22%);
  --border-strong:hsl(220 8% 32%);    --border-strong-hsl:hsl(220 8% 32%);

  /* Brand-derived semantic */
  --accent-primary:       hsl(var(--brand-500));
  --accent-primary-hover: hsl(var(--brand-400));
  --accent-secondary:     hsl(var(--accent2-500));
  --accent-fg:            hsl(0 0% 100%);

  /* Short-form aliases (legacy names retained for cross-page compatibility).
     Components should prefer the explicit names below:
       --bg          → --bg              (no alias needed; native token)
       --surface     → --surface-1
       --border      → --border-default
       --muted       → --text-muted
     The aliases follow the theme automatically via cascade. */
  --surface: var(--surface-1);
  --border:  var(--border-default);
  --muted:   var(--text-muted);

  /* Status semantic */
  --success-100: hsl(145 60% 95%);
  --success-500: hsl(145 65% 45%);
  --success-700: hsl(145 65% 30%);
  --warn-500:    hsl(38 92% 50%);
  --warn-100:    hsl(38 92% 95%);
  --danger-500:  hsl(0 75% 55%);
  --danger-100:  hsl(0 75% 95%);

  /* Grid (decorative) */
  --grid-line: hsl(220 12% 18% / 0.5);

  /* focus ring único — substitui outlines ad-hoc */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px hsl(var(--brand-500));

  /* z-index scale — acabou o número mágico */
  --z-sticky: 100;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;

  /* Category hues (per-tool tint) */
  --cat-red:    hsl(8 80% 58%);
  --cat-green:  hsl(150 55% 48%);
  --cat-blue:   hsl(220 75% 60%);
  --cat-purple: hsl(270 60% 62%);
  --cat-orange: hsl(28 85% 55%);
  --cat-cyan:   hsl(190 70% 52%);
  --cat-pink:   hsl(340 75% 60%);
  --cat-muted:  hsl(220 8% 55%);
  --cat-yellow: hsl(48 90% 55%);

  /* Lang badges */
  --lang-js:    hsl(40 80% 55%);
  --lang-ts:    hsl(215 75% 55%);
  --lang-py:    hsl(45 70% 52%);
  --lang-go:    hsl(190 65% 52%);
  --lang-rs:    hsl(15 70% 55%);
  --lang-sql:   hsl(330 65% 55%);
  --lang-shell: hsl(140 45% 50%);
  --lang-other: hsl(220 8% 55%);

  /* ---------- Typography --------------------------------------------- */
  --font-body: 'Inter', 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Consolas', Menlo, monospace;

  /* Type scale (rem) */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */
  --text-6xl: 3.75rem;    /* 60 */
  --text-7xl: 4.5rem;     /* 72 */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight: -0.025em;
  --ls-snug: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-mono: 0.02em;

  /* ---------- Spacing (4-based) ------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ---------- Layout ------------------------------------------------ */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-wide: 1400px;
  --header-height: 64px;
  --section-rhythm: 96px;
  --gutter: 24px;
  --baseline: 8px;

  /* ---------- Radius ------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Borders ----------------------------------------------- */
  --border-w-hairline: 1px;
  --border-w-default: 1px;
  --border-w-bold: 2px;

  /* ---------- Shadows ----------------------------------------------- */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.4);
  --shadow-pop: 0 12px 40px -8px hsl(0 0% 0% / 0.6);
  --shadow-glow: 0 0 0 1px hsl(var(--brand-500) / 0.5),
                 0 8px 24px -6px hsl(var(--brand-500) / 0.45);

  /* ---------- Motion ------------------------------------------------ */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.35, 0.45, 1);

  /* motion — durações por papel (interação ≤ 240ms; entrada até 400ms) */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-index ----------------------------------------------- */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 500;
  --z-tooltip: 600;
,
  /* elevation stack — 1 nível por camada física */
  --shadow-1: 0 1px 2px hsl(220 20% 3% / .4),
              inset 0 1px 0 hsl(0 0% 100% / .04);
  --shadow-2: 0 2px 6px hsl(220 20% 3% / .35), 0 1px 2px hsl(220 20% 3% / .3);
  --shadow-3: 0 8px 24px -6px hsl(220 20% 3% / .5);
  --shadow-4: 0 16px 48px -12px hsl(220 20% 3% / .6);}

:root[data-theme="light"] {
  --bg:           hsl(220 16% 98%);
  --bg-elev:      hsl(0 0% 100%);
  --surface-1:    hsl(0 0% 100%);
  --surface-2:    hsl(220 14% 96%);
  --surface-3:    hsl(220 12% 92%);
  --text-strong:  hsl(220 18% 12%);
  --text-main:    hsl(220 12% 22%);
  --text-muted:   hsl(220 8% 42%);
  --text-faint:   hsl(220 6% 58%);
  --border-subtle:hsl(220 12% 90%);
  --border-default:hsl(220 10% 84%);
  --border-strong:hsl(220 8% 70%);

  --accent-fg:            hsl(0 0% 100%);
  --success-100: hsl(145 60% 92%);
  --success-500: hsl(145 65% 32%);
  --success-700: hsl(145 70% 22%);
  --warn-500:    hsl(32 90% 42%);
  --warn-100:    hsl(38 90% 92%);
  --danger-500:  hsl(0 70% 45%);
  --danger-100:  hsl(0 70% 95%);

  --grid-line: hsl(220 16% 88% / 0.6);

  --shadow-sm: 0 1px 2px hsl(220 18% 12% / 0.05);
  --shadow-md: 0 4px 12px hsl(220 18% 12% / 0.08);
  --shadow-pop: 0 12px 40px -8px hsl(220 18% 12% / 0.18);
  --shadow-glow: 0 0 0 1px hsl(var(--brand-500) / 0.45),
                 0 8px 24px -6px hsl(var(--brand-500) / 0.35);

  --shadow-1: 0 1px 2px hsl(220 18% 12% / .06),
              inset 0 1px 0 hsl(0 0% 100% / .6);
  --shadow-2: 0 2px 6px hsl(220 18% 12% / .08), 0 1px 2px hsl(220 18% 12% / .06);
  --shadow-3: 0 8px 24px -6px hsl(220 18% 12% / .14);
  --shadow-4: 0 16px 48px -12px hsl(220 18% 12% / .2);
}