/* =====================================================================
   BIT TEK.ai - Design Tokens (v0.1)
   ---------------------------------------------------------------------
   Single source of visual truth. The whole feel of the product lives
   here so it can be re-tuned in one place.

   Design intent (from docs/NORTH_STAR, docs/PRODUCT_DIRECTION):
     - Warm, minimal, confident, quietly intelligent.
     - "Creative workshop / studio desk" - craftsmanship over futurism.
     - NO neon, NO heavy gradients, NO AI cliches.
   Palette is warm paper + ink, with a single clay accent used sparingly.
   Perspective hues are deliberately MUTED so they read as calm labels,
   never as loud persona cards.
   ===================================================================== */

:root {
  color-scheme: light;
  /* Semantic theme layer. Legacy component names below remain as aliases so
     Daylight retains its exact established palette. */
  --surface-page:     #F7F4EE;
  --surface-recessed: #F1ECE2;
  --surface-card:     #FFFFFF;
  --surface-note:     #FBF9F5;
  --text-primary:     #2A2723;
  --text-secondary:   #4A453E;
  --text-muted:       #857E73;
  --text-faint:       #C5BDB0;
  --accent:           #C15F3C;
  --accent-strong:    #A54E2F;
  --accent-soft:      #F4E4DA;
  --border-subtle:    #E7E0D4;
  --border-strong:    #D9D0C0;
  --notebook-line:    rgba(95, 72, 56, .045);
  --notebook-margin:  rgba(193, 95, 60, .16);
  --page-glow-a:      rgba(193, 95, 60, .045);
  --page-glow-b:      rgba(124, 122, 78, .05);
  --surface-open:     rgba(255, 255, 255, .24);
  --accent-rule:      rgba(193, 95, 60, .35);

  /* --- Surfaces: warm paper, not clinical white --- */
  --paper:            var(--surface-page);   /* page background */
  --paper-deep:       var(--surface-recessed);   /* recessed areas */
  --surface:          var(--surface-card);   /* cards, input */
  --surface-warm:     var(--surface-note);   /* secondary surfaces */

  /* --- Ink: warm near-black, never pure #000 --- */
  --ink:              var(--text-primary);   /* primary text */
  --ink-soft:         var(--text-secondary);   /* secondary text */
  --ink-muted:        var(--text-muted);   /* hints, captions */
  --ink-faint:        var(--text-faint);   /* placeholder, dividers */

  /* --- Accent: a single warm clay. Used sparingly. --- */
  --clay:             var(--accent);
  --clay-deep:        var(--accent-strong);
  --clay-tint:        var(--accent-soft);   /* washed accent background */

  /* --- Perspective hues (muted, calm - small labels only) --- */
  --p-practical:      #6B6357;   /* neutral ink-brown - the lead voice */
  --p-skeptical:      #5B6B78;   /* muted slate */
  --p-creative:       #8A5A76;   /* muted plum */
  --p-humor:          #7C7A4E;   /* warm olive */

  /* --- Lines & edges --- */
  --line:             var(--border-subtle);
  --line-strong:      var(--border-strong);

  /* --- Soft, warm-tinted elevation (never harsh) --- */
  --shadow-sm:  0 1px 2px rgba(58, 44, 30, 0.05);
  --shadow-md:  0 6px 24px rgba(58, 44, 30, 0.07);
  --shadow-lg:  0 18px 48px rgba(58, 44, 30, 0.10);

  /* --- Type --- */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* --- Spacing scale (4-based) --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* --- Radii: soft, generous - notebook corners --- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-pill: 999px;

  /* --- Motion: gentle, composed, never flashy --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  480ms;

  --content-width: 720px;
}

html[data-theme="after-hours"] {
  color-scheme: dark;
  --surface-page:     #191A18;
  --surface-recessed: #20211E;
  --surface-card:     #252521;
  --surface-note:     #22231F;
  --text-primary:     #ECE6DA;
  --text-secondary:   #C8C0B3;
  --text-muted:       #9A9387;
  --text-faint:       #706B62;
  --accent:           #D47A55;
  --accent-strong:    #E18A63;
  --accent-soft:      #3B2922;
  --border-subtle:    #34352F;
  --border-strong:    #4A4A42;
  --notebook-line:    rgba(232, 225, 211, .035);
  --notebook-margin:  rgba(212, 122, 85, .22);
  --page-glow-a:      rgba(212, 122, 85, .055);
  --page-glow-b:      rgba(154, 141, 92, .035);
  --surface-open:     rgba(236, 230, 218, .04);
  --accent-rule:      rgba(225, 138, 99, .48);
  --shadow-sm: 0 1px 3px rgba(5, 5, 4, .24);
  --shadow-md: 0 8px 28px rgba(5, 5, 4, .3);
  --shadow-lg: 0 18px 48px rgba(5, 5, 4, .38);
  --p-practical: #B8AD9C;
  --p-skeptical: #9DAFBA;
  --p-creative: #C39AAF;
  --p-humor: #B8B27B;
}

/* Respect users who prefer calm. All motion collapses gracefully. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}