/* ============================================================
   FocusRoom — Design Tokens
   ------------------------------------------------------------
   EDITORIAL LIBRARY. One system for the whole product, so the
   app feels like the same object as the marketing page.

   The three moves that define it:
   • WARM INK, never blue-black. Warmth reads human.
   • HAIRLINES, not cards. Structure comes from 1px rules and
     space, so radii are small and shadows are almost absent.
   • BRASS AS PUNCTUATION. One accent, used rarely. Everything
     that used to be a violet gradient is now brass or nothing.
   ============================================================ */

:root {
  /* ---- Accent: brass. The only saturated colour in the system. ---- */
  --brass-600: #A8762F;
  --brass-500: #C08A3E;
  --brass-400: #DCA85C;
  --brass-300: #E8C489;

  /* Legacy brand-* names map onto brass so every existing
     component inherits the new palette without a rewrite. */
  --brand-500: var(--brass-500);
  --brand-400: var(--brass-400);
  --brand-300: var(--brass-300);
  --brand-600: var(--brass-600);
  --brand-glow: rgba(192, 138, 62, 0.22);

  /* ---- Status. Muted and warm so nothing screams. ---- */
  --accent-green: #7F9E76;
  --accent-amber: #C08A3E;
  --accent-teal:  #6E9490;
  --accent-rose:  #B5705F;

  /* ---- Surfaces: warm ink ---- */
  --bg:        #0D0C0B;
  --bg-1:      #100E0D;
  --surface:   #141210;
  --surface-2: #1A1714;
  --surface-3: #232019;
  --elevated:  #1A1714;

  /* ---- Paper (light sections & the light theme) ---- */
  --paper:   #F4F1EA;
  --paper-2: #EAE5DA;

  --line:        rgba(235, 231, 224, 0.13);
  --line-strong: rgba(235, 231, 224, 0.26);

  /* ---- Text ---- */
  --text:    #EBE7E0;
  --text-2:  #9C958A;
  --text-3:  #6B655C;
  --text-inv: #0D0C0B;

  --focus-ring: var(--brass-400);
  --success: #7F9E76;
  --warning: #C08A3E;
  --danger:  #B5705F;

  /* ---- "Gradients" — deliberately flat. Editorial systems get
          their richness from paper and ink, not from ramps. ---- */
  --grad-brand:   linear-gradient(180deg, var(--brass-500), var(--brass-600));
  --grad-hero:    none;
  --grad-aurora:  linear-gradient(180deg, var(--brass-400), var(--brass-600));
  --grad-surface: none;
  --grad-text:    none;

  /* ---- Typography ---- */
  --font-serif: 'Instrument', Georgia, 'Times New Roman', serif;
  --font-sans:  "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 6vw, 4.6rem);
  --fs-h1: clamp(1.9rem, 3.6vw, 2.8rem);
  --fs-h2: clamp(1.5rem, 2.8vw, 2.1rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.62;

  /* ---- Spacing ---- */
  --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; --s-10: 128px;

  /* ---- Radius: small. Sharp corners read as considered;
          big pills read as generic dashboard. ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-full: 999px;

  /* ---- Depth: nearly none. Hairlines do the work. ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-lg: 0 14px 40px -18px rgba(0,0,0,0.7);
  --shadow-glow: none;
  --ring-inset: none;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 340ms; --dur-4: 520ms;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-wide: 1320px;
  --nav-h: 68px;
}

/* Dark-only by design. A light theme would fight the calm this product is
   built around, and students mostly use it at night. The selector is kept as
   a hard override so a stale stored preference can never produce a half-light
   page. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}