/* ==========================================================================
   SAMOSA MEETS CHAI — design tokens
   Source: samosa_meets_chai/DESIGN.md (frontmatter) + the Tailwind config
   the Stitch screens were built with. Nothing in here is a component.
   ========================================================================== */

:root {
  /* ---- Colour: Material-style roles (DESIGN.md frontmatter) ------------ */
  --c-surface: #faf9f5;
  --c-surface-dim: #dbdad6;
  --c-surface-bright: #faf9f5;
  --c-surface-lowest: #ffffff;
  --c-surface-low: #f5f4f0;
  --c-surface-container: #efeeea;
  --c-surface-high: #e9e8e4;
  --c-surface-highest: #e3e2df;
  --c-surface-variant: #e3e2df;
  --c-on-surface: #1b1c1a;
  --c-on-surface-variant: #5b403b;
  --c-inverse-surface: #30312e;
  --c-inverse-on-surface: #f2f1ed;
  --c-outline: #907069;
  --c-outline-variant: #e4beb6;
  --c-surface-tint: #b82106;

  --c-primary: var(--accent, #b41e04);
  --c-on-primary: #ffffff;
  --c-primary-container: #d8391e;
  --c-on-primary-container: #fffbff;
  --c-inverse-primary: #ffb4a5;
  --c-primary-fixed: #ffdad3;
  --c-primary-fixed-dim: #ffb4a5;
  --c-on-primary-fixed: #3f0400;
  --c-on-primary-fixed-variant: #8f1200;

  --c-secondary: #5f5e61;
  --c-on-secondary: #ffffff;
  --c-secondary-container: #e4e1e6;
  --c-on-secondary-container: #656467;
  --c-secondary-fixed: #e4e1e6;
  --c-secondary-fixed-dim: #c8c5ca;
  --c-on-secondary-fixed: #1b1b1e;
  --c-on-secondary-fixed-variant: #47464a;

  --c-tertiary: #b50062;
  --c-on-tertiary: #ffffff;
  --c-tertiary-container: #de197b;
  --c-on-tertiary-container: #fffbff;
  --c-tertiary-fixed: #ffd9e2;
  --c-tertiary-fixed-dim: #ffb0c9;
  --c-on-tertiary-fixed: #3e001e;
  --c-on-tertiary-fixed-variant: #8e004b;

  --c-error: #ba1a1a;
  --c-on-error: #ffffff;
  --c-error-container: #ffdad6;
  --c-on-error-container: #93000a;

  --c-background: #faf9f5;
  --c-on-background: #1b1c1a;

  /* ---- Colour: brand accents (DESIGN.md prose) -------------------------- */
  --c-ink: #0f0f12;
  --c-coral: #ff5436;
  --c-punk: #ff3b94;
  --c-lime: #ccff00;
  --c-lilac: #e9e4ff;
  --c-newsprint: #f7f6f2;
  --c-white: #ffffff;
  --c-live: #22c55e;

  /* Per-section accent. tag.accent_color overrides this on section pages. */
  --section-accent: var(--c-primary);
  --section-on-accent: #ffffff;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: var(--gh-font-heading, "Syne"), "Helvetica Neue", Arial, sans-serif;
  --font-serif: var(--gh-font-body, "Newsreader"), Georgia, "Times New Roman", serif;
  --font-mono: "Space Grotesk", "SF Mono", Menlo, monospace;
  --font-kannada: "Noto Sans Kannada", "Space Grotesk", sans-serif;

  /* display-xl */
  --t-display-xl-size: 44px;  --t-display-xl-lh: 44px;  --t-display-xl-ls: -0.03em; --t-display-xl-w: 800;
  /* display-lg */
  --t-display-lg-size: 36px;  --t-display-lg-lh: 38px;  --t-display-lg-ls: -0.02em; --t-display-lg-w: 800;
  /* headline-lg */
  --t-headline-lg-size: 28px; --t-headline-lg-lh: 32px; --t-headline-lg-ls: -0.01em; --t-headline-lg-w: 700;
  /* headline-md (same on every width) */
  --t-headline-md-size: 28px; --t-headline-md-lh: 34px; --t-headline-md-ls: -0.01em; --t-headline-md-w: 700;
  /* headline-sm (Newsreader) */
  --t-headline-sm-size: 22px; --t-headline-sm-lh: 28px; --t-headline-sm-ls: 0;      --t-headline-sm-w: 600;
  /* body */
  --t-body-lg-size: 19px; --t-body-lg-lh: 30px; --t-body-lg-ls: -0.005em;
  --t-body-md-size: 16px; --t-body-md-lh: 26px; --t-body-md-ls: 0;
  --t-body-sm-size: 14px; --t-body-sm-lh: 20px; --t-body-sm-ls: 0.01em;
  /* labels (Space Grotesk) */
  --t-label-lg-size: 14px; --t-label-lg-lh: 18px; --t-label-lg-ls: 0.08em; --t-label-lg-w: 700;
  --t-label-md-size: 12px; --t-label-md-lh: 16px; --t-label-md-ls: 0.10em; --t-label-md-w: 700;
  --t-label-sm-size: 10px; --t-label-sm-lh: 14px; --t-label-sm-ls: 0.12em; --t-label-sm-w: 600;

  /* tracking helpers (Tailwind scale the screens use) */
  --ls-tighter: -0.05em;
  --ls-tight: -0.025em;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* ---- Spacing ---------------------------------------------------------- */
  --gutter: 0.75rem;        /* gutter-mobile */
  --margin: 1rem;           /* margin-mobile */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.75rem;
  --space-xl: 3rem;

  /* fixed chrome */
  --header-h: 7rem;         /* cover masthead (h-28) */
  --header-compact-h: 5rem; /* SMC MAG masthead (h-20) */
  --header-reader-h: 4rem;  /* article reader (h-16) */
  --dock-h: 4rem;

  /* ---- Shape ------------------------------------------------------------ */
  --r-sm: 2px;
  --r: 4px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 9999px;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sh: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --sh-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --sh-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --sh-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --sh-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --sh-header: 0 1px 8px rgb(0 0 0 / 0.04);
  --sh-dock: 0 1px 8px rgb(0 0 0 / 0.08);
  /* neo-brutalist hard drops from DESIGN.md */
  --sh-hard: 2px 2px 0 var(--c-ink);
  --sh-hard-lg: 4px 4px 0 var(--c-ink);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 150ms;
  --ticker-dur: 18s;
}

/* Tablet: 8 columns, 20px gutters, 24px margins */
@media (min-width: 768px) {
  :root {
    --gutter: 1.25rem;
    --margin: 1.5rem;
  }
}

/* Desktop: 12 columns, 24px gutters, 40px margins; full display scale */
@media (min-width: 1024px) {
  :root {
    --gutter: 1.5rem;
    --margin: 2.5rem;
    --sh-hard: 4px 4px 0 var(--c-ink);

    /* fluid between 1024px and 1440px so the widest Syne words fit; exact screen values at 1440 */
    --t-display-xl-size: clamp(60px, 6.1vw, 88px);  --t-display-xl-lh: clamp(58px, 5.83vw, 84px);  --t-display-xl-ls: -0.04em;
    --t-display-lg-size: clamp(48px, 4.45vw, 64px); --t-display-lg-lh: clamp(48px, 4.45vw, 64px);  --t-display-lg-ls: -0.03em;
    --t-headline-lg-size: 40px; --t-headline-lg-lh: 44px; --t-headline-lg-ls: -0.02em;
  }
}

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