/* ============================================================================
   DiSky Design System: Tokens (fonts, type scale, aliases, extensions)
   ---------------------------------------------------------------------------
   COLOR SOURCE OF TRUTH lives in theme.css (shadcn contract, :root/.dark).
   This file layers everything DiSky-specific on top of it:
     1. fonts + raw hue palette + shape/motion/type scale (theme-independent)
     2. aliases mapping the legacy DiSky names onto the shadcn contract
     3. extension tokens with no shadcn equivalent (Skript syntax palette,
        link color, inset surfaces, …), keyed by the same .dark class
     4. semantic element defaults
   UI sans = Outfit, self-hosted from fonts/. Mono = JetBrains Mono, self-hosted
   from fonts/jetbrains-mono/ (no third-party font origin).
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-VariableFont_wght.woff2") format("woff2-variations"),
       url("fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono, self-hosted (variable wght 400-800 + italic 400), latin +
   latin-ext subsets. Files fetched from Google Fonts v24; unicode-range kept
   so a subset only downloads when a glyph needs it. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono/jetbrains-mono-latin-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono/jetbrains-mono-latin-ext-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------------------
   1. RAW PALETTE: zinc scale + brand + semantic hues (theme-independent)
   These are the primitive values. Prefer the SEMANTIC tokens in code.
---------------------------------------------------------------------------- */
:root {
  /* Zinc (neutral spine) */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Brand: Discord blurple */
  --blurple-300: #a5b4fc; /* soft tint for dark-mode links/syntax */
  --blurple:     #5865f2; /* primary */
  --blurple-600: #4752c4; /* hover / active */
  --blurple-700: #3c45a5; /* pressed */

  /* Brand: "Braise" (DiSky v5 logo kit) */
  --braise-200: #fde68a; /* ring */
  --braise-300: #fdba74; /* D top (dark) */
  --braise-400: #fb923c; /* D top (light) */
  --braise-700: #c2410c; /* D bottom (dark) */
  --braise-800: #9a3412; /* D bottom (light) */

  /* Semantic hues (badges + inline status only) */
  --emerald-300: #6ee7b7;  --emerald-500: #10b981;  --emerald-600: #059669;
  --amber-300:   #fcd34d;  --amber-500:   #f59e0b;  --amber-600:   #d97706;
  --rose-300:    #fda4af;  --rose-500:    #f43f5e;  --rose-600:    #e11d48;
  --sky-300:     #7dd3fc;  --sky-500:     #0ea5e9;  --sky-600:     #0284c7;

  /* Shape & motion: radii derive from the theme's --radius (0.375rem
     default: sm 4px, base 6px, lg 8px, xl 12px) */
  --radius-sm: calc(var(--radius) - 0.125rem);
  --radius-lg: calc(var(--radius) + 0.125rem);
  --radius-xl: calc(var(--radius) * 2);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur:      150ms;
  --dur-slow: 220ms;

  /* Type families */
  --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Geist Mono", Menlo, Consolas, monospace;

  /* Type scale (tight, technical) */
  --fs-page:    1.875rem; /* 30px page title */
  --fs-section: 1.25rem;  /* 20px section header */
  --fs-name:    1rem;     /* 16px syntax name (mono) */
  --fs-body:    0.9375rem;/* 15px body */
  --fs-code:    0.84375rem;/* 13.5px inline/code */
  --fs-caption: 0.8125rem;/* 13px caption */
  --fs-micro:   0.6875rem;/* 11px badge/label */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.04em;  /* uppercase labels */
}

/* ----------------------------------------------------------------------------
   2. DiSky ALIASES: legacy names, now reading the shadcn contract.
   Theme-agnostic: the contract vars swap under .dark, these follow.
---------------------------------------------------------------------------- */
:root {
  --bg:            var(--background);
  --bg-raised:     var(--card);
  --bg-hover:      var(--muted);
  --border-strong: var(--input);
  --fg:            var(--foreground);
  --fg-muted:      var(--muted-foreground);
  --primary-fg:    var(--primary-foreground);

  /* Semantic text/tint/border triples; text + tint ride the alert tokens */
  --success: var(--alert-success-foreground);
  --success-bg: var(--alert-success-bg);
  --warning: var(--alert-warning-foreground);
  --warning-bg: var(--alert-warning-bg);
  --info: var(--alert-info-foreground);
  --info-bg: var(--alert-info-bg);
  --danger: var(--alert-danger-foreground);      /* status TEXT color        */
  --destructive-bg: var(--alert-danger-bg);      /* (--destructive itself is */
                                                 /* the shadcn FILL color)   */
}

/* ----------------------------------------------------------------------------
   3. DiSky EXTENSIONS: no shadcn equivalent; per-theme like the contract.
---------------------------------------------------------------------------- */
:root {
  --bg-active:   #fce9d4;           /* active nav fill */
  --bg-inset:    #fbebdb;           /* inset wells, inline code */
  --fg-faint:    #9c806c;           /* tertiary / metadata */
  --primary-hover: var(--braise-800);
  --link:        var(--braise-700);

  --success-bd: rgba(5, 150, 105, 0.28);
  --warning-bd: rgba(217, 119, 6, 0.30);
  --destructive-bd: rgba(225, 29, 72, 0.30);
  --info-bd: rgba(2, 132, 199, 0.28);
  /* Blueprint's --alert-danger-foreground resolves to --destructive-foreground (white, the
     fill-button text color), which vanishes on the light tint. Pin a real status text color. */
  --danger: #e11d48;   /* rose-600 */

  /* ---- Skript syntax palette (light, on zinc-50) ---- */
  --code-bg:        #fffcf7;
  --code-fg:        #2b1d14;
  --syn-comment:    #9ca3af;
  --syn-keyword:    #4f46e5;  /* indigo-600 */
  --syn-effect:     #7c3aed;  /* violet-600 */
  --syn-string:     #059669;  /* emerald-600 */
  --syn-number:     #d97706;  /* amber-600 */
  --syn-type:       #0284c7;  /* sky-600 */
  --syn-punc:       #71717a;  /* zinc-500 */
  --syn-var:        #c026d3;  /* fuchsia-600 */
  --syn-placeholder-bg: rgba(2, 132, 199, 0.08);
}

.dark {
  --bg-active:   #2a1b12;
  --bg-inset:    #100905;
  --fg-faint:    #8a7262;
  --primary-hover: var(--braise-400);
  --link:        var(--braise-300);

  --success-bd: rgba(16, 185, 129, 0.30);
  --warning-bd: rgba(245, 158, 11, 0.30);
  --destructive-bd: rgba(244, 63, 94, 0.32);
  --info-bd: rgba(14, 165, 233, 0.30);
  --danger: #fb7185;   /* rose-400 */

  /* ---- Skript syntax palette (dark, calm on zinc-900) ---- */
  --code-bg:        #1f140d;
  --code-fg:        #ece0d6;  /* default text / entity names */
  --syn-comment:    #6b7280;  /* italic, zinc-500/gray */
  --syn-keyword:    #a5b4fc;  /* control: define, loop, if, on, stop  (indigo-300) */
  --syn-effect:     #c4b5fd;  /* effects: set, add, make, reply, post  (violet-300) */
  --syn-string:     #6ee7b7;  /* "strings"  (emerald-300) */
  --syn-number:     #fcd34d;  /* numbers + booleans  (amber-300) */
  --syn-type:       #7dd3fc;  /* %type% placeholders + type names  (sky-300) */
  --syn-punc:       #a1a1aa;  /* : { } % , punctuation  (zinc-400) */
  --syn-var:        #f0abfc;  /* {variables}  (fuchsia-300, used sparingly) */
  --syn-placeholder-bg: rgba(125, 211, 252, 0.10); /* %type% pill bg */
}

/* ============================================================================
   4. SEMANTIC ELEMENT DEFAULTS: apply the tokens to real tags.
   Pull these in for body copy; components override locally.
   ========================================================================== */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-page);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg);
}
h2, .h2 {
  font-size: var(--fs-section);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--fg);
}
h3, .h3 {
  font-size: 1.0625rem;
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg);
}
p, .body { color: var(--fg); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.label-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
}

a, .link { color: var(--link); text-decoration: none; }
a:hover, .link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Mono usage, heavily present: patterns, types, inline code */
code, .mono, .code {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
}
:not(pre) > code {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.36em;
  color: var(--fg);
  white-space: nowrap; /* never break an inline code span across lines */
}

/* Focus ring: disciplined braise */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: rgba(251, 146, 60, 0.30); }