/* Classie Design System — tokens
 * Source: System design.fig → Page-1 → 1920w/2400w default
 * Dark-first; light-mode is a parity reflection.
 * All values are lifted directly from the Figma where possible.
 */

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Satoshi-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Satoshi-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Satoshi-Bold.woff2") format("woff2");
}

:root,
.classie-dark {
  /* ─── Base surfaces ────────────────────────────────────────── */
  --bg-base:      #09090B;   /* page canvas                          */
  --bg-surface:   #17171C;   /* card, panel                          */
  --bg-raised:    #25252D;   /* chip, button, well                   */
  --bg-raised-2:  #2E2E38;   /* hover on raised                      */
  --bg-input:     #09090B;   /* input sits flush w/ page             */
  --bg-chrome:    rgba(23, 23, 28, 0.10); /* frosted nav/topbar      */
  --bg-overlay:   rgba(0, 0, 0, 0.60);    /* modal backdrop          */

  /* ─── Foreground (text & icon) ─────────────────────────────── */
  --fg-primary:   #FFFFFF;
  --fg-secondary: #B1C0D2;   /* default body + label                 */
  --fg-secondary-alt: #B1C0D5; /* ~variant found in Figma            */
  --fg-tertiary:  #79849A;
  --fg-muted:     #63748A;
  --fg-disabled:  #86868B;

  /* ─── Borders & dividers ──────────────────────────────────── */
  --border-default: #2E2E38;
  --border-strong:  #373743;
  --border-quiet:   rgba(46, 46, 56, 0.60);

  /* ─── Brand primary ───────────────────────────────────────── */
  /* Classie Sky — the single brand color. Every interactive state
     routes through these tokens (links, CTAs, focus, highlights). */
  --brand-primary:       #00ADFF;               /* THE brand color     */
  --brand-primary-hover: #30BDFF;               /* hover / lighter     */
  --brand-primary-10:    rgba(0, 173, 255, 0.10);
  --brand-primary-16:    rgba(0, 173, 255, 0.16);
  --brand-primary-label: #2783BD;               /* label-on-tint       */

  /* Legacy aliases kept so existing components keep working.
     New code should use --brand-primary / --brand-primary-hover. */
  --accent-sky:      var(--brand-primary-hover);
  --accent-sky-deep: var(--brand-primary);
  --accent-sky-10:   var(--brand-primary-10);
  --accent-sky-16:   var(--brand-primary-16);
  --accent-sky-label:var(--brand-primary-label);

  /* ─── Semantic accents (not brand) ────────────────────────── */
  --accent-mint:     #6BFFCE;   /* activity/trace lines              */
  --accent-mint-soft:#86EFAC;
  --brand-mint:      var(--accent-mint);         /* legacy alias       */
  --brand-mint-soft: var(--accent-mint-soft);    /* legacy alias       */

  --success:       #22C55E;
  --success-soft:  #86EFAC;
  --warning:       #F97316;
  --warning-soft:  #FDBA74;
  --danger:        #F43F5E;
  --danger-bg:     rgba(239, 68, 68, 0.16);
  --danger-soft:   #FCA5A5;
  --info:          #3B82F6;

  /* neutrals from Figma slate ramp */
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;

  /* ─── Shadow system ───────────────────────────────────────── */
  --shadow-sm:    0 1px 2px -1px rgba(0,0,0,0.05), 0 1px 3px 0 rgba(0,0,0,0.05);
  --shadow-card:  0 1px 2px -1px rgba(0,0,0,0.10), 0 1px 3px 0 rgba(0,0,0,0.10);
  --shadow-pop:   0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10);
  --shadow-chrome:0 8px 10px -6px rgba(0,0,0,0.40), 0 20px 25px -5px rgba(0,0,0,0.40);
  --shadow-inset-quiet: inset 0 1px 2px 0 rgba(18,18,23,0.05);

  /* ─── Radius ──────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;   /* buttons, inputs                       */
  --radius-md: 8px;   /* node cards                            */
  --radius-lg: 12px;  /* cards, tags                           */
  --radius-xl: 16px;
  --radius-2xl: 24px; /* avatar                                */
  --radius-pill: 32px;/* pill buttons                          */
  --radius-full: 9999px;

  /* ─── Spacing ─────────────────────────────────────────────── */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── Type scale (all Inter) ──────────────────────────────── */
  --font-body: "Satoshi", "Satoshi Variable", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo,
               Consolas, monospace;

  --fs-caption:  10.9px;  /* email subline                    */
  --fs-tag:      12.9px;  /* pills                            */
  --fs-meta:     13.3px;  /* avatar name line, timeline meta  */
  --fs-label:    14.8px;  /* control / nav labels             */
  --fs-body:     15.1px;  /* default body                     */
  --fs-big:      16.6px;  /* buttons with icon                */
  --fs-h3:       22.5px;  /* card title                       */
  --fs-h2:       22.9px;  /* CLASSIE-DEV heavy                */
  --fs-h1:       28.4px;  /* page title                       */
  --fs-kpi:      32px;    /* KPI hero numerals (scale up)     */
  --fs-kpi-xl:   40px;    /* dev-financial-agent cost         */

  --lh-caption: 16px;
  --lh-tag:     20px;
  --lh-meta:    20px;
  --lh-label:   24px;
  --lh-body:    24px;
  --lh-big:     27px;
  --lh-h3:      32px;
  --lh-h2:      32px;
  --lh-h1:      36px;
  --lh-kpi:     40px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
  --dur-fast: 150ms;
  --dur-med:  200ms;
  --dur-slow: 250ms;

  /* ─── Blur ───────────────────────────────────────────────── */
  --blur-chrome: blur(24px);
  --blur-pop:    blur(16px);
}

/* ─── Light mode — parity with identical token keys ────────── */
.classie-light {
  --bg-base:      #FFFFFF;
  --bg-surface:   #FFFFFF;
  --bg-raised:    #F4F4F5;
  --bg-raised-2:  #E4E4E7;
  --bg-input:     #FFFFFF;
  --bg-chrome:    rgba(255, 255, 255, 0.70);
  --bg-overlay:   rgba(15, 23, 42, 0.40);

  --fg-primary:   #09090B;
  --fg-secondary: #3F3F46;
  --fg-secondary-alt: #334155;
  --fg-tertiary:  #63748A;
  --fg-muted:     #86868B;
  --fg-disabled:  #A1A1AA;

  --border-default: #E4E4E7;
  --border-strong:  #D4D4D8;
  --border-quiet:   rgba(228, 228, 231, 0.60);

  --shadow-card:   0 1px 2px -1px rgba(15,23,42,0.06), 0 1px 3px 0 rgba(15,23,42,0.06);
  --shadow-chrome: 0 1px 2px 0 rgba(15,23,42,0.04), 0 8px 24px -4px rgba(15,23,42,0.08);

  --accent-sky-10: rgba(0, 173, 255, 0.08);
  --accent-sky-16: rgba(0, 173, 255, 0.14);
  --danger-bg:     rgba(239, 68, 68, 0.10);
}

/* ─── Semantic element defaults ─────────────────────────────── */
html, body {
  background: var(--bg-base);
  color: var(--fg-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
  margin: 0;
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  color: var(--fg-secondary);
  margin: 0;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
  margin: 0;
}
.label  { font-size: var(--fs-label);  line-height: var(--lh-label);  font-weight: var(--fw-medium); color: var(--fg-secondary); }
.meta   { font-size: var(--fs-meta);   line-height: var(--lh-meta);   font-weight: var(--fw-medium); color: var(--fg-tertiary); }
.tag    { font-size: var(--fs-tag);    line-height: var(--lh-tag);    font-weight: var(--fw-bold);   color: var(--fg-secondary); }
.caption{ font-size: var(--fs-caption);line-height: var(--lh-caption);font-weight: var(--fw-medium); color: var(--fg-muted); }
.kpi    { font-size: var(--fs-kpi);    line-height: var(--lh-kpi);    font-weight: var(--fw-medium); color: var(--fg-primary); letter-spacing: -0.01em;}
.kpi-xl { font-size: var(--fs-kpi-xl); line-height: 48px;            font-weight: var(--fw-medium); color: var(--fg-primary); letter-spacing: -0.02em;}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-secondary);
}

a { color: var(--accent-sky); text-decoration: none; }
a:hover { color: var(--accent-sky-deep); }

hr, .divider {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 0;
}

::selection { background: var(--accent-sky-16); color: var(--fg-primary); }

*:focus-visible {
  outline: 2px solid var(--accent-sky);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}