/* ==========================================================================
   Cessaland — Design Tokens
   "Desk lamp at midnight": a dark study surface lit by one warm working
   light. Every color, shadow and radius in the product traces back to this
   one physical idea — nothing here is a generic dashboard default.
   ========================================================================== */

:root {
  /* ---- Surface (the desk, in shadow) ------------------------------------ */
  --bg-base: #0b0e18;
  --bg-elevated-1: #10141f;
  --bg-elevated-2: #161b2a;

  --surface: #151a29;
  --surface-2: #1a2033;
  --surface-glass: rgba(255, 255, 255, 0.035);
  --surface-glass-strong: rgba(255, 255, 255, 0.06);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-amber: rgba(232, 163, 61, 0.35);

  /* ---- Light (the lamp) --------------------------------------------------- */
  --amber-100: #f6d9a3;
  --amber-300: #f2c572;
  --amber-500: #e8a33d;
  --amber-700: #b97a24;
  --amber-900: #6b4514;

  --teal-300: #7fe0d3;
  --teal-500: #4fd1c5;
  --teal-700: #2f8f86;

  --accent: var(--amber-500);
  --accent-soft: var(--amber-300);
  --accent-2: var(--teal-500);

  /* ---- Text (paper under the lamp) --------------------------------------- */
  --text-primary: #f3f0e8;
  --text-secondary: #a7adc0;
  --text-tertiary: #6b7285;
  --text-on-accent: #1a1204;

  /* ---- Shadow (cast by objects raised off the desk) ---------------------- */
  --shadow-color: 3, 5, 12;
  --shadow-ambient: 0 1px 2px rgba(var(--shadow-color), 0.5);
  --shadow-resting:
    0 1px 1px rgba(var(--shadow-color), 0.4),
    0 10px 24px -12px rgba(var(--shadow-color), 0.6);
  --shadow-elevated:
    0 2px 2px rgba(var(--shadow-color), 0.35),
    0 24px 48px -16px rgba(var(--shadow-color), 0.7),
    0 8px 20px -10px rgba(var(--shadow-color), 0.55);
  --shadow-elevated-hover:
    0 2px 3px rgba(var(--shadow-color), 0.4),
    0 36px 64px -16px rgba(var(--shadow-color), 0.78),
    0 14px 28px -10px rgba(var(--shadow-color), 0.6);
  --shadow-glow-amber: 0 0 1px rgba(232, 163, 61, 0.6), 0 8px 32px -6px rgba(232, 163, 61, 0.35);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---- Geometry ------------------------------------------------------------ */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container-max: 1220px;

  /* ---- Type ---------------------------------------------------------------- */
  --font-display: "Vazirmatn", "Vazirmatn Fallback", sans-serif;
  --font-body: "Vazirmatn", "Vazirmatn Fallback", sans-serif;
  --font-mono: "Vazirmatn", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.1rem, 1.55rem + 2.4vw, 3.4rem);
  --fs-h1: clamp(1.6rem, 1.3rem + 1.3vw, 2.2rem);
  --fs-h2: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --fs-readout: clamp(2.4rem, 2rem + 1.6vw, 3.4rem);

  --ease-lamp: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-medium: 320ms;
  --dur-slow: 560ms;
}