/**
 * tokens.css — the Moktra design system, as handed off in the 2026
 * "Ganpati UI" mockups (Moktra Ganpati UI mockups-handoff/).
 *
 * The palette is a deep temple maroon against warm cream, lit by gold, with
 * a muted green used for anything that means "settled / verified". Every
 * literal colour in the mockups maps to one of the variables below — page
 * CSS should never hardcode a hex.
 */
:root {
  /* ---------- Ground ---------- */
  --cream: #f7f2ea;          /* page background */
  --cream-2: #f2ece1;        /* alternating band */
  --surface: #fffdf8;        /* cards */
  --surface-warm: #faf5ea;   /* inset panels inside cards */
  --gold-wash: #f9ecd2;      /* ribbons, highlight bands */
  --gold-tint: #f1e6cc;      /* icon chips */

  /* ---------- Maroon ---------- */
  --maroon-900: #3d1119;     /* footer, step rail */
  --maroon-800: #4a1521;     /* header, dark cards */
  --maroon-700: #5a1a28;
  --maroon-600: #6b1e2f;     /* links, primary-dark buttons */
  --maroon-500: #7d2436;
  --maroon-tint: #f4e4e6;
  --maroon-tint-border: #e3c9cd;

  /* ---------- Gold ---------- */
  --gold: #e0a325;           /* primary action */
  --gold-bright: #f0b13a;    /* hover */
  --gold-soft: #f0c766;      /* on-dark text */
  --gold-ink: #3b1d05;       /* text on gold */
  --gold-deep: #6b4e15;      /* text on gold tint */
  --amber: #c9741a;          /* section eyebrow icons */

  /* ---------- Green ---------- */
  --green-900: #20302d;      /* "all services" band */
  --green-800: #1f403b;      /* prices, confirmations */
  --green-600: #2f5d56;
  --green-tint: #e2ede9;
  --green-ink: #eef6f2;      /* text on green */

  /* ---------- Ink ---------- */
  --ink: #241f1a;            /* body text */
  --ink-2: #3f3930;          /* long-form prose */
  --ink-3: #57503f;          /* secondary copy */
  --ink-4: #6b6252;          /* labels */
  --ink-5: #8a8272;          /* meta, captions */
  --ink-6: #a0967f;          /* placeholders */
  --on-dark: #fff8f0;        /* text on maroon */

  /* ---------- Lines ---------- */
  --line: #e8dcc6;
  --line-soft: #efe6d5;
  --line-strong: #ddd0b8;
  --line-warm: #e3d7c4;
  --line-gold: #edd6a7;

  /* ---------- State ---------- */
  --error: #a63a2a;
  --error-bg: #f8e6e2;
  --error-border: #e4bdb4;
  --error-ink: #7d2417;

  /* ---------- Glow ---------- */
  --glow-gold: 0 0 26px -2px rgba(224, 163, 37, .8);
  --glow-gold-soft: 0 0 34px -14px rgba(224, 163, 37, .75);
  --glow-maroon: 0 0 24px -8px rgba(107, 30, 47, .7);
  --glow-green: 0 0 24px -8px rgba(47, 93, 86, .7);

  /* ---------- Shadow ---------- */
  --shadow-card: 0 2px 14px -8px rgba(61, 17, 25, .25);
  --shadow-raised: 0 18px 44px -36px rgba(74, 21, 33, .55);
  --shadow-float: 0 24px 60px -30px rgba(74, 21, 33, .5);

  /* ---------- Type ---------- */
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Geometry ---------- */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-pill: 999px;

  --container: 1200px;
  --container-narrow: 1120px;
  --gutter: clamp(16px, 4vw, 24px);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 200ms;
  --t: 240ms;
  --t-slow: 340ms;
}

/* ==========================================================================
   LEGACY ALIASES
   The customer dashboard, Pandit Corner and the admin console were built
   against the previous token names and aren't part of the 2026 handoff.
   Rather than rewrite three internal surfaces, their tokens are re-pointed
   at the palette above — so they inherit the new maroon/gold/cream without
   any markup changes. New work should use the tokens at the top of the file.
   ========================================================================== */
:root {
  /* Surfaces */
  --color-paper: var(--cream);
  --color-surface: var(--surface);
  --color-surface-sunken: var(--surface-warm);
  --color-line: var(--line-warm);
  --color-line-strong: var(--line-strong);

  /* Ink */
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-3);
  --color-ink-faint: var(--ink-5);

  /* Brand */
  --color-maroon: var(--maroon-600);
  --color-maroon-deep: var(--maroon-800);
  --color-maroon-tint: var(--maroon-tint);
  --color-brass: #a97f31;
  --color-brass-tint: var(--gold-tint);
  --color-teal: var(--green-600);
  --color-teal-deep: var(--green-800);
  --color-teal-tint: var(--green-tint);

  /* System */
  --color-error: var(--error);
  --color-error-tint: var(--error-bg);
  --color-warning: #96631f;
  --color-warning-tint: #f6ecd8;
  --color-focus: var(--gold);

  /* Type scale */
  --fs-display-xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-display-l: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-display-m: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-display-s: 1.25rem;
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-body-s: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radii */
  --radius-s: var(--radius-sm);
  --radius-m: var(--radius);
  --radius-l: var(--radius-xl);

  /* Shadow */
  --shadow-s: 0 1px 2px rgba(36, 31, 26, .06), 0 1px 1px rgba(36, 31, 26, .04);
  --shadow-m: 0 6px 20px -6px rgba(36, 31, 26, .16);
  --shadow-l: var(--shadow-float);

  /* Motion */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* Layout */
  --container-max: var(--container);
  --container-pad: var(--gutter);
  --header-h: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}