/* ============================================================================
   Payam Academy — Design tokens
   Imported verbatim from the Claude Design project
   "Payam Academy Design System" (a3791124-c888-497c-b8c4-58c29a2a1df9):
     tokens/colors.css · tokens/typography.css · tokens/spacing.css
     tokens/radius.css · tokens/shadows.css

   DO NOT hand-edit values here. Change them in the design system, then re-run
   the import. Font family names match the self-hosted faces in ds-fonts.css.
   ========================================================================= */

/* ---------------------------------------------------------------- colors --
   Emerald + champagne-gold, from the arched marble reference.
   Base ramps first, semantic aliases below. The warm "clay" accent of v1 is
   repurposed to GOLD; --clay-* map to --gold-* so old references recolor
   automatically. Prefer --gold-* / --accent. */
:root {
  /* Emerald green ramp — the primary brand color */
  --green-900: #0e3b2c;   /* deepest emerald — hero, header, footer, dark sections */
  --green-800: #12402f;
  --green-700: #1a4c3b;
  --green-600: #2e6650;   /* sage — secondary surfaces on dark */
  --green-500: #3c7361;
  --green-400: #5e8676;   /* muted moss */
  --green-300: #93aca0;
  --green-200: #bccfc5;

  /* Cream & sand — warm neutrals */
  --cream-50: #faf7f2;    /* page background */
  --cream-100: #f4f0e8;
  --sand-200: #eeebe2;    /* raised surface / muted panels */
  --sand-300: #e4ddcf;    /* hairline borders on light */
  --sand-400: #d6ccb8;    /* stronger beige border */

  /* Champagne gold accent — the brand's metal */
  --gold-300: #dcc48a;    /* light champagne */
  --gold-500: #c2a25b;    /* primary gold */
  --gold-600: #a5863f;    /* deep gold */
  --clay-300: var(--gold-300);
  --clay-500: var(--gold-500);
  --clay-600: var(--gold-600);

  /* Ink — text on light */
  --ink-900: #14201b;
  --ink-700: #2c3a33;
  --ink-500: #55655c;
  --ink-400: #7c8a81;

  --white: #ffffff;
  --black: #0a1611;

  /* Status (kept muted to sit with the palette) */
  --status-success: #3d7a5a;
  --status-error: #b4482f;
  --status-warning: #c1892f;
  --status-info: #2e6650;

  /* Semantic aliases */
  --color-bg: var(--cream-50);
  --color-bg-warm: var(--cream-100);
  --surface-card: var(--white);
  --surface-sand: var(--sand-200);
  --surface-forest: var(--green-900);
  --surface-forest-soft: var(--green-700);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-on-forest: #ede7da;
  --text-on-forest-muted: #a9bab0;

  --brand: var(--green-900);
  --brand-sage: var(--green-600);
  --accent: var(--gold-500);
  --accent-strong: var(--gold-600);

  --border-subtle: var(--sand-300);
  --border-strong: var(--green-900);
  --border-gold: rgba(194, 162, 91, .55);
  --border-on-forest: rgba(220, 196, 138, .28);

  --link: var(--green-700);
  --link-hover: var(--gold-600);

  --focus-ring: var(--gold-500);
  --overlay: rgba(14, 59, 44, .58);
}

/* ------------------------------------------------------------ typography --
   Display face runs large; body face runs at UI sizes. Markazi Text is
   low-x-height, so display sizes are generous. */
:root {
  --font-display: 'Markazi Text', 'Cormorant Garamond', serif;
  --font-body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-latin: 'Cormorant Garamond', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --fs-display-2xl: 5.5rem;    /* 88px hero */
  --fs-display-xl: 4.25rem;    /* 68px */
  --fs-display-lg: 3.25rem;    /* 52px section title */
  --fs-display-md: 2.5rem;     /* 40px */
  --fs-display-sm: 2rem;       /* 32px */

  --fs-h1: 1.75rem;            /* 28px */
  --fs-h2: 1.5rem;             /* 24px */
  --fs-h3: 1.25rem;            /* 20px */
  --fs-lead: 1.25rem;          /* 20px intro paragraph */
  --fs-body: 1.0625rem;        /* 17px base body */
  --fs-body-sm: 0.9375rem;     /* 15px */
  --fs-caption: 0.8125rem;     /* 13px */
  --fs-eyebrow: 0.75rem;       /* 12px overline */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.7;
  --lh-relaxed: 1.9;

  --ls-eyebrow: 0.28em;
  --ls-tight: -0.01em;
  --ls-normal: 0;
}

/* --------------------------------------------------- spacing & layout ----
   4px base grid. */
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;            /* generous section rhythm */

  --container-max: 1240px;
  --container-narrow: 760px;   /* editorial prose measure */
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

/* ------------------------------------------------------ radius & curves --
   The brand leans editorial & sharp for UI, but its signature CURVE is the
   tombstone ARCH used to frame imagery. */
:root {
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-card: var(--radius-sm);
  --radius-arch: 9999px 9999px 0 0;
  --radius-arch-soft: 120px 120px var(--radius-sm) var(--radius-sm);
}

/* ------------------------------------------------- elevation & motion ----
   Shadows are soft, low, warm-tinted — never harsh. The brand prefers
   hairline borders and negative space over drop shadows. */
:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(20, 32, 27, .06);
  --shadow-md: 0 10px 28px -14px rgba(20, 32, 27, .20);
  --shadow-lg: 0 26px 64px -28px rgba(20, 32, 27, .32);
  --shadow-focus: 0 0 0 3px rgba(193, 122, 80, .35);

  --border-width: 1px;
  --border-hairline: 1px solid var(--border-subtle);

  --transition-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --transition-base: 240ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow: 520ms cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}