/* ============================================================
   Studio OS — Design Tokens
   Matched to chrishansen.design: warm near-black, cream/tan
   accent, forest green secondary, DM Serif Display + DM Sans.
   Dark mode only.
   ============================================================ */

:root {
  /* Surfaces — warm near-black, not blue-black */
  --bg: #0c0c0b;
  --bg-grad:
    radial-gradient(ellipse 70% 50% at 70% -10%, rgba(201,185,154,0.05), transparent 65%),
    radial-gradient(ellipse 40% 30% at 15% 80%, rgba(74,124,89,0.04), transparent 60%),
    #0c0c0b;
  --surface: #131312;
  --surface-2: #1a1a18;
  --surface-3: #222220;
  --elevated: #1c1c1a;
  --hover: rgba(242,237,231,0.04);
  --hover-strong: rgba(242,237,231,0.07);
  --active: rgba(242,237,231,0.09);

  /* Borders — whisper-thin, matching the source site exactly */
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);
  --border-faint: rgba(255,255,255,0.045);

  /* Text — warm cream down to dim warm-gray */
  --text: #f2ede7;
  --text-2: #a39d93;
  --text-3: #87837d;
  --text-4: #524f4b;

  /* Accent — tan/cream (configurable via Settings) */
  --accent: #c9b99a;
  --accent-fg: #0c0c0b;
  --accent-soft: rgba(201,185,154,0.14);
  --accent-soft-2: rgba(201,185,154,0.26);
  --accent-text: #e9ddd0;

  /* Semantic colors (pills, statuses) — earthy, desaturated */
  --c-gray:   #87837d;   --c-gray-bg:   rgba(135,131,125,0.14);
  --c-blue:   #8a9bb0;   --c-blue-bg:   rgba(138,155,176,0.14);
  --c-green:  #4a7c59;   --c-green-bg:  rgba(74,124,89,0.16);
  --c-yellow: #c9a23f;   --c-yellow-bg: rgba(201,162,63,0.14);
  --c-orange: #c97c4a;   --c-orange-bg: rgba(201,124,74,0.14);
  --c-red:    #c1604f;   --c-red-bg:    rgba(193,96,79,0.14);
  --c-purple: #9a82a8;   --c-purple-bg: rgba(154,130,168,0.14);
  --c-pink:   #c98a96;   --c-pink-bg:   rgba(201,138,150,0.14);
  --c-teal:   #6f9a93;   --c-teal-bg:   rgba(111,154,147,0.14);

  /* Typography */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "DM Serif Display", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii — sharp and architectural; pills stay fully rounded as a deliberate contrast */
  --r-sm: 3px;
  --r: 4px;
  --r-md: 5px;
  --r-lg: 6px;
  --r-xl: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 50px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-pop: 0 24px 70px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1240px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.12s;
  --t: 0.2s;
  --t-slow: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}