/* ════════════════════════════════════════════════════════════════════════
   KHIPU v2 — Clean token system
   Light: white + deep-navy ink + one institutional blue accent
   Dark : clean slate (navy-tinted, not warm-black) + white + bright blue
   Type : Vortigra (titles) · Kastroo (labels) · Dolce Vita (marks) ·
          Inter (UI) · JetBrains Mono (data)
   ════════════════════════════════════════════════════════════════════════ */


/* Self-hosted text faces (telosyn-site discipline: no font CDN).
   Inter: variable latin subset shared with the homepage (weights 400-600;
   700 clamps to the file's axis maximum). JetBrains Mono: @fontsource latin
   static weights 400/500/600/700. */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/Inter-latin.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Vortigra'; src:url('fonts/Vortigra.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Kastroo';  src:url('fonts/KASTROO.woff') format('woff'), url('fonts/KASTROO.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Dolce Vita'; src:url('fonts/DolceVita-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Dolce Vita'; src:url('fonts/DolceVita.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Dolce Vita'; src:url('fonts/DolceVita-Heavy.ttf') format('truetype'); font-weight:800; font-display:swap; }

:root {
  /* ─── Type families ─── */
  --k-font-headline: 'Vortigra','Iowan Old Style',Georgia,serif;     /* mixed-case display serif */
  --k-font-label:    'Kastroo','Vortigra',Georgia,serif;             /* UPPERCASE accent labels */
  --k-font-mark:     'Dolce Vita','Inter',system-ui,sans-serif;      /* UPPERCASE brand / overline */
  --k-font-ui:       'Inter',system-ui,-apple-system,sans-serif;     /* dashboard UI */
  --k-font-mono:     'JetBrains Mono','SF Mono',Menlo,Consolas,monospace; /* data numerals */

  /* ─── Type scale · minor third 1.2 from 16 ─── */
  --k-fs-display: 2.488rem; --k-fs-h1: 2.074rem; --k-fs-h2: 1.728rem;
  --k-fs-h3: 1.44rem; --k-fs-h4: 1.2rem; --k-fs-body: 1rem; --k-fs-sm: 0.875rem;
  --k-fs-caption: 0.75rem; --k-fs-2xs: 0.6875rem; --k-fs-3xs: 0.625rem;

  --k-w-regular:400; --k-w-medium:500; --k-w-semibold:600; --k-w-bold:700;
  --k-lh-tight:1.15; --k-lh-snug:1.35; --k-lh-normal:1.5; --k-lh-relaxed:1.6;
  --k-tr-tight:-0.02em; --k-tr-wide:0.04em; --k-tr-over:0.16em;

  /* ─── Spacing · 8px grid ─── */
  --k-s-1:4px; --k-s-2:8px; --k-s-3:12px; --k-s-4:16px; --k-s-5:20px;
  --k-s-6:24px; --k-s-7:28px; --k-s-8:32px; --k-s-10:40px; --k-s-12:48px; --k-s-16:64px;

  /* ─── Radius ─── */
  --k-r-xs:4px; --k-r-sm:6px; --k-r-md:8px; --k-r-lg:12px; --k-r-full:9999px;

  /* ─── Motion ─── */
  --k-ease:cubic-bezier(0.4,0,0.2,1);
  --k-dur-fast:100ms; --k-dur:200ms; --k-dur-slow:300ms;  /* aligned to --krl-duration-* (codebase canonical) */

  /* ─── Chrome metrics ─── */
  --k-rail-w:64px; --k-topbar-h:56px; --k-footer-h:30px; --k-inspector-w:384px;

  /* ═══ LIGHT THEME (default) ═══════════════════════════════ */
  --k-bg:        #FBFCFD;   /* app / canvas */
  --k-panel:     #FFFFFF;   /* topbar, rail, inspector */
  --k-surface:   #FFFFFF;   /* cards */
  --k-raised:    #FFFFFF;   /* popovers (with shadow) */
  --k-sunken:    #F2F5F9;   /* wells, hovers, sunken fields */
  --k-rule:      #E4E9F0;
  --k-rule-strong:#CFD8E3;

  --k-ink:       #0E1726;   /* primary text */
  --k-ink-2:     #4B5A72;   /* secondary */
  --k-ink-3:     #8593A8;   /* tertiary / muted */
  --k-ink-4:     #AAB6C7;   /* quaternary / faint */
  --k-ink-inv:   #FFFFFF;   /* on-accent text */

  /* Khipu brand electric blue */
  --k-accent:    #0D07FB;
  --k-accent-2:  #0A05C8;   /* hover/press darker */
  --k-logo:      #0D07FB;   /* brand mark fill (blue in light, white in dark) */
  --k-accent-soft:#EAF0FE;  /* tinted fill */
  --k-accent-line:#BFD2FA;  /* tinted border */
  --k-ring:      rgba(30,80,200,0.30);

  /* signals (single saturation family) */
  --k-pos:#1F8A52; --k-pos-bg:#E6F4EC;
  --k-warn:#B7791F; --k-warn-bg:#FBF1DE;
  --k-neg:#C2382E; --k-neg-bg:#FBE9E7;
  --k-info:#0D07FB; --k-info-bg:#ECECFE;

  /* data viz — restrained, blue-led */
  --k-viz-1:#0D07FB; --k-viz-2:#3B82F6; --k-viz-3:#0EA5A4; --k-viz-4:#7C5CE0;
  --k-viz-5:#C2382E; --k-viz-6:#B7791F; --k-viz-7:#1F8A52; --k-viz-8:#64748B;

  --k-shadow-1: 0 1px 2px rgba(16,30,58,0.05), 0 1px 3px rgba(16,30,58,0.04);
  --k-shadow-2: 0 4px 12px rgba(16,30,58,0.08), 0 2px 4px rgba(16,30,58,0.05);
  --k-shadow-3: 0 16px 48px rgba(16,30,58,0.14), 0 4px 12px rgba(16,30,58,0.08);
  --k-scrim: rgba(20,30,52,0.40);
}

/* ═══ DARK THEME — clean slate ═══════════════════════════════ */
[data-theme="dark"] {
  --k-bg:        #0E141F;
  --k-panel:     #131B28;
  --k-surface:   #151E2D;
  --k-raised:    #1B2636;
  --k-sunken:    #0A0F18;
  --k-rule:      #233044;
  --k-rule-strong:#34455E;

  --k-ink:       #EEF2F8;
  --k-ink-2:     #A2B0C6;
  --k-ink-3:     #6E7E97;
  --k-ink-4:     #4F5E76;
  --k-ink-inv:   #0A0F18;

  --k-accent:    #5A6BFF;
  --k-accent-2:  #8290FF;
  --k-logo:      #FFFFFF;
  --k-accent-soft:#16243F;
  --k-accent-line:#2B4575;
  --k-ring:      rgba(90,140,240,0.40);

  --k-pos:#46C98A; --k-pos-bg:#10241B;
  --k-warn:#E0B25A; --k-warn-bg:#2A2113;
  --k-neg:#F08A82; --k-neg-bg:#2C1614;
  --k-info:#5A8CF0; --k-info-bg:#16243F;

  --k-viz-1:#5A8CF0; --k-viz-2:#7AA4F5; --k-viz-3:#3FD0CE; --k-viz-4:#A78BFA;
  --k-viz-5:#F08A82; --k-viz-6:#E0B25A; --k-viz-7:#46C98A; --k-viz-8:#94A3B8;

  --k-shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --k-shadow-2: 0 4px 14px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30);
  --k-shadow-3: 0 18px 50px rgba(0,0,0,0.60), 0 6px 16px rgba(0,0,0,0.40);
  --k-scrim: rgba(0,0,0,0.58);
}

/* Derive accent tints from a single --k-accent (set by Tweaks) so both
   themes stay correct: soft/line mix against the themed panel/rule. */
:root, [data-theme="dark"] {
  --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, var(--k-panel));
  --k-accent-line: color-mix(in oklab, var(--k-accent) 38%, var(--k-rule));
  --k-ring:        color-mix(in oklab, var(--k-accent) 34%, transparent);
  --k-info: var(--k-accent); --k-info-bg: var(--k-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root { --k-dur-fast:0ms; --k-dur:0ms; --k-dur-slow:0ms; }
}

/* ════════════════════════════ base ════════════════════════════ */
* { box-sizing:border-box; }
html,body,#root { height:100%; margin:0; }
body {
  background:var(--k-bg); color:var(--k-ink);
  font-family:var(--k-font-ui); font-size:var(--k-fs-sm); line-height:var(--k-lh-normal);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition: background var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease);
}
button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
input,select,textarea { font:inherit; color:inherit; }
::selection { background:color-mix(in oklab,var(--k-accent) 28%,transparent); }
:focus-visible { outline:2px solid var(--k-accent); outline-offset:2px; }

/* scrollbars */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--k-rule-strong); border-radius:9999px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--k-ink-4); background-clip:content-box; }
*::-webkit-scrollbar-track { background:transparent; }

/* ════════════════════════════ type helpers ════════════════════════════ */
.k-headline { font-family:var(--k-font-headline); font-weight:400; line-height:var(--k-lh-tight); letter-spacing:-0.01em; }
.k-headline em { font-style:italic; color:var(--k-accent); }
.k-label { font-family:var(--k-font-label); text-transform:uppercase; letter-spacing:var(--k-tr-wide); font-weight:400; line-height:1.05; }
.k-mark { font-family:var(--k-font-mark); text-transform:uppercase; letter-spacing:var(--k-tr-over); font-weight:800; }
.k-overline { font-family:var(--k-font-mark); text-transform:uppercase; letter-spacing:var(--k-tr-over); font-weight:400; font-size:var(--k-fs-3xs); color:var(--k-ink-3); }
.k-mono { font-family:var(--k-font-mono); font-variant-numeric:tabular-nums; }
.k-num { font-family:var(--k-font-mono); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; }

/* serif suppression — when tweak turns Vortigra off in-app */
[data-serif="off"] .k-headline { font-family:var(--k-font-ui); font-weight:700; letter-spacing:-0.02em; }
[data-serif="off"] .k-headline em { font-style:normal; }