/* ───────────────────────────────────────────────────────────────────────────
   VENDORED from the kan.fyi design system project (Claude Design project
   a46fae42-cab1-4c86-93fa-8bab839d39ea). Do not hand-edit values here — edit
   them in the design project and re-copy, or the two drift apart silently.

   Source files, concatenated in the order ds/styles.css @imports them:
     ds/tokens/colors.css      → PALETTE + SEMANTIC
     ds/tokens/typography.css  → families, weights, scale, base element defaults
     ds/tokens/spacing.css     → spacing scale, containers, control heights
     ds/tokens/elevation.css   → radius, shadows, motion, reduced-motion floor

   Two deliberate omissions:
     · ds/tokens/fonts.css — its @import of the Google Fonts CSS is hoisted into
       a <link rel="preconnect"> + <link rel="stylesheet"> pair in index.html.
       A nested @import inside a stylesheet serializes the font fetch behind
       this file's own download, which costs a round trip on the critical path.
     · ds/tokens/themes.css — RETIRED upstream (pre-kan.fyi page presets); the
       design system's own ds/styles.css deliberately does not import it.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── PALETTE ─────────────────────────────────────────────────────────────
     Warm paper neutrals — "kertas" (paper). Hue ~85, very low chroma. */
  --paper-50:  oklch(0.991 0.004 85);   /* lightest surface / page bg       */
  --paper-100: oklch(0.975 0.006 85);   /* raised surface / muted fill      */
  --paper-200: oklch(0.945 0.008 85);   /* hairline borders, dividers       */
  --paper-300: oklch(0.905 0.010 85);   /* stronger border, input outline   */
  --paper-400: oklch(0.815 0.011 84);   /* disabled fill / placeholder edge */

  /* Warm ink — text neutrals. Hue ~70-80, a hair of chroma keeps it warm. */
  --ink-400:   oklch(0.640 0.014 78);   /* faint text / placeholder         */
  --ink-500:   oklch(0.560 0.015 76);   /* muted text                       */
  --ink-600:   oklch(0.495 0.016 74);   /* secondary text                   */
  --ink-800:   oklch(0.340 0.016 70);   /* strong text                      */
  --ink-900:   oklch(0.235 0.014 68);   /* primary text — warm near-black   */

  /* Jade green — "live". Published status, URLs, links, analytics bars. */
  --green-50:  oklch(0.965 0.022 162);
  --green-100: oklch(0.930 0.040 162);
  --green-200: oklch(0.870 0.068 162);
  --green-300: oklch(0.780 0.095 161);
  --green-500: oklch(0.560 0.118 160);  /* accessible mid (large text/UI)   */
  --green-600: oklch(0.520 0.116 160);  /* PRIMARY — white text AA          */
  --green-700: oklch(0.470 0.110 160);  /* hover                            */
  --green-800: oklch(0.410 0.098 160);  /* active / pressed                 */
  --green-900: oklch(0.300 0.066 160);

  /* Turmeric amber — the brand color. Hero blocks, blobs, brand moments. */
  --amber-50:  oklch(0.975 0.028 82);
  --amber-100: oklch(0.945 0.058 82);
  --amber-200: oklch(0.900 0.090 80);
  --amber-400: oklch(0.820 0.140 78);
  --amber-500: oklch(0.780 0.155 75);   /* ACCENT fill — dark text on it    */
  --amber-600: oklch(0.690 0.150 70);
  --amber-700: oklch(0.535 0.124 63);   /* warning text on amber-50 — AA    */

  /* Sky — info. A soft, calm blue that stays friendly, not corporate. */
  --sky-50:    oklch(0.965 0.022 240);
  --sky-100:   oklch(0.925 0.045 240);
  --sky-600:   oklch(0.560 0.110 242);  /* info text/fill — white text AA   */
  --sky-700:   oklch(0.500 0.105 242);

  /* Terracotta red — destructive. Warm red so it stays in the family. */
  --red-50:    oklch(0.965 0.022 28);
  --red-100:   oklch(0.925 0.045 28);
  --red-500:   oklch(0.580 0.190 27);
  --red-600:   oklch(0.525 0.196 27);   /* DESTRUCTIVE — white text AA      */
  --red-700:   oklch(0.470 0.180 27);

  --white:     oklch(1 0 0);

  /* ── SEMANTIC (shadcn names) ─────────────────────────────────────────────
     The contract every component reads. Map only — no new values here. */
  --background:            var(--paper-50);
  --foreground:            var(--ink-900);   /* on bg: 16.4:1                */

  --card:                  var(--white);
  --card-foreground:       var(--ink-900);   /* on card: 16.7:1             */

  --popover:               var(--white);
  --popover-foreground:    var(--ink-900);

  /* Primary action = warm ink (see role map above). Hover lightens a step. */
  --primary:               var(--ink-900);
  --primary-foreground:    var(--paper-50);
  --primary-hover:         var(--ink-800);
  --primary-active:        var(--ink-800);
  --primary-subtle:        var(--paper-100);
  --primary-subtle-foreground: var(--ink-800);

  /* Secondary = quiet outline button on card */
  --secondary:             var(--card);
  --secondary-foreground:  var(--foreground);
  --secondary-hover:       var(--muted);

  --accent:                var(--amber-500);
  --accent-foreground:     var(--ink-900);     /* ink on amber: 8.2:1        */
  --accent-subtle:         var(--amber-50);
  --accent-subtle-foreground: var(--amber-700);

  --muted:                 var(--paper-100);
  --muted-foreground:      var(--ink-600);     /* muted text on bg: 6.0:1    */

  --border:                var(--paper-200);
  --input:                 var(--paper-300);
  --ring:                  var(--green-600);

  --success:               var(--green-600);
  --success-foreground:    var(--white);
  --success-subtle:        var(--green-50);
  --success-subtle-foreground: var(--green-800);

  --warning:               var(--amber-500);
  --warning-foreground:    var(--ink-900);
  --warning-subtle:        var(--amber-50);
  --warning-subtle-foreground: var(--amber-700); /* on amber-50: 4.9:1 (AA) */

  --info:                  var(--sky-600);
  --info-foreground:       var(--white);
  --info-subtle:           var(--sky-50);
  --info-subtle-foreground: var(--sky-700);

  --destructive:           var(--red-600);
  --destructive-foreground:var(--white);       /* white on red: 5.9:1        */
  --destructive-subtle:    var(--red-50);
  --destructive-subtle-foreground: var(--red-700);

  /* Focus ring — used by every interactive primitive */
  --ring-offset: var(--background);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
               Consolas, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  --text-display:        2.25rem;
  --leading-display:     1.05;
  --tracking-display:    -0.02em;
  --weight-display:      var(--weight-black);

  --text-h1:             1.75rem;
  --leading-h1:          1.15;
  --tracking-h1:         -0.015em;
  --weight-h1:           var(--weight-bold);

  --text-h2:             1.375rem;
  --leading-h2:          1.25;
  --tracking-h2:         -0.01em;
  --weight-h2:           var(--weight-bold);

  --text-h3:             1.125rem;
  --leading-h3:          1.35;
  --tracking-h3:         -0.005em;
  --weight-h3:           var(--weight-semibold);

  --text-body-lg:        1.0625rem;
  --leading-body-lg:     1.6;

  --text-body:           1rem;
  --leading-body:        1.55;
  --tracking-body:       0;

  --text-label:          0.875rem;
  --leading-label:       1.4;
  --tracking-label:      0.005em;
  --weight-label:        var(--weight-semibold);

  --text-caption:        0.75rem;
  --leading-caption:     1.35;
  --tracking-caption:    0.01em;

  --text-overline:       0.6875rem;
  --leading-overline:    1.2;
  --tracking-overline:   0.08em;

  --text-mono:           0.9375rem;
  --leading-mono:        1.4;
  --tracking-mono:       0;

  /* ── Spacing / layout ────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  --container-shell:   71.25rem;
  --container-app:     67.5rem;
  --container-content: 45rem;
  --container-dialog:  31.25rem;
  --container-auth:    24.375rem;
  --gutter:            var(--space-6);

  --tap-target: 2.75rem;

  --control-sm: 2rem;
  --control-md: 2.5rem;
  --control-lg: 2.875rem;
  --control-xl: 3.25rem;

  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius-xs:   0.375rem;
  --radius-sm:   0.625rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.125rem;
  --radius-xl:   1.5rem;
  --radius-pill: 999px;
  --radius:      var(--radius-md);

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --shadow-color: 28 18% 30%; /* warm brown HSL channel for soft shadows */
  --shadow-xs:
    0 1px 2px -1px hsl(var(--shadow-color) / 0.10);
  --shadow-sm:
    0 1px 2px -1px hsl(var(--shadow-color) / 0.10),
    0 2px 5px -2px hsl(var(--shadow-color) / 0.08);
  --shadow-md:
    0 2px 4px -2px hsl(var(--shadow-color) / 0.10),
    0 6px 14px -4px hsl(var(--shadow-color) / 0.10);
  --shadow-lg:
    0 4px 8px -3px hsl(var(--shadow-color) / 0.10),
    0 16px 32px -8px hsl(var(--shadow-color) / 0.14);
  --shadow-xl:
    0 8px 16px -6px hsl(var(--shadow-color) / 0.12),
    0 28px 56px -12px hsl(var(--shadow-color) / 0.18);
  --shadow-lift:
    0 2px 0 0 hsl(var(--shadow-color) / 0.06),
    0 4px 10px -3px hsl(var(--shadow-color) / 0.12);

  --ring-width: 3px;
  --ring-gap:   2px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;

  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);  /* enter/exit      */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* decel           */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);        /* accel           */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* tactile press   */
}

/* Base element defaults — applied globally so raw HTML inherits the system. */
html {
  font-family: var(--font-sans);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11" 1; /* legible lowercase l/1 distinction */
}

body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--foreground);
  font-weight: var(--weight-regular);
}

.tabular,
[data-mono] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Honor reduced-motion globally — quality floor, not an afterthought.
   NOTE: this kills CSS animation only. The hero/terminal loops are driven by
   JS timers, which this cannot reach — app.js checks the same media query and
   renders the finished state without starting any timer. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}