/* Sanskrit Setu — design tokens v1.0.0
   Reading text keeps the wordmark families: Spectral (Latin) + Frank Ruhl Libre (Hebrew).
   UI chrome uses one dual-script family (Assistant) so labels cannot drift between languages.
   Devanagari content has its own token pair — never style Sanskrit with the prose tokens. */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Frank+Ruhl+Libre:wght@300;400;500;700&family=Assistant:wght@400;500;600;700&family=Noto+Serif+Devanagari:wght@400;600&display=swap');

:root {
  /* families */
  --font-display: Spectral, Georgia, 'Times New Roman', serif;
  --font-prose: Spectral, Georgia, serif;
  --font-ui: Assistant, system-ui, sans-serif;
  --font-deva: 'Noto Serif Devanagari', serif; /* same family the mark's स was traced from */

  /* type */
  --type-display-1-size: 56px;
  --type-display-1-lh: 1.05;
  --type-display-1-weight: 400;
  --type-display-1-tracking: -0.01em;
  --type-display-2-size: 40px;
  --type-display-2-lh: 1.1;
  --type-display-2-weight: 400;
  --type-display-2-tracking: -0.005em;
  --type-heading-1-size: 30px;
  --type-heading-1-lh: 1.2;
  --type-heading-1-weight: 400;
  --type-heading-1-tracking: 0;
  --type-heading-2-size: 24px;
  --type-heading-2-lh: 1.3;
  --type-heading-2-weight: 500;
  --type-heading-2-tracking: 0;
  --type-body-lg-size: 19px;
  --type-body-lg-lh: 1.65;
  --type-body-lg-weight: 400;
  --type-body-size: 17px;
  --type-body-lh: 1.7;
  --type-body-weight: 400;
  --type-body-sm-size: 15px;
  --type-body-sm-lh: 1.65;
  --type-body-sm-weight: 400;
  --type-ui-lg-size: 17px;
  --type-ui-lg-lh: 1.4;
  --type-ui-lg-weight: 500;
  --type-ui-size: 15px;
  --type-ui-lh: 1.4;
  --type-ui-weight: 400;
  --type-ui-strong-size: 15px;
  --type-ui-strong-lh: 1.4;
  --type-ui-strong-weight: 600;
  --type-ui-sm-size: 13px;
  --type-ui-sm-lh: 1.45;
  --type-ui-sm-weight: 500;
  --type-ui-sm-tracking: 0.02em;
  --type-label-size: 11px;
  --type-label-lh: 1.3;
  --type-label-weight: 600;
  --type-label-tracking: 0.14em;
  --type-sanskrit-size: 26px;
  --type-sanskrit-lh: 2;
  --type-sanskrit-weight: 400;
  --type-sanskrit-inline-size: 20px;
  --type-sanskrit-inline-lh: 1.9;
  --type-sanskrit-inline-weight: 400;
  /* Devanagari display — the verse centrepiece only. Steps up at md/lg below.
     Leading is tighter than the 2.0 content rule because a display line has no
     line below it to crop; mātrā clearance is held by the box, not by leading.
     Flagged for owner review. */
  --type-sanskrit-display-size: 52px;
  --type-sanskrit-display-lh: 1.5;
  --type-sanskrit-display-weight: 400;

  /* colour — light */
  --color-bg: #EDEBE4;
  --color-surface: #FBFAF6;
  --color-surface-raised: #FFFFFF;
  --color-surface-hover: #F4F2EA;
  --color-surface-pressed: #E6E3D8;
  --color-text: #1E2A47;
  --color-text-secondary: #5B5548;
  --color-text-muted: #7A7365;
  --color-text-on-accent: #1E2A47;
  --color-text-inverse: #EDEBE4;
  --color-accent: #C0872A;
  --color-accent-text: #8F5D14;
  --color-accent-hover: #A9741F;
  --color-accent-subtle: #F2E6CC;
  --color-border: #DFDCD0;
  --color-border-strong: #CFCBBE;
  --color-border-accent: #C0872A;
  --color-focus: #1E2A47;
  --color-focus-halo: #C0872A;
  --color-error: #8A2E2E;
  --color-error-surface: #F7E9E7;
  --color-success: #2F6B4F;
  --color-success-surface: #E6EFE9;

  /* space */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  /* radius */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-icon: 21.875%;

  /* border */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-bar: 3px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(30,42,71,0.08);
  --shadow-2: 0 2px 8px rgba(30,42,71,0.10);
  --shadow-3: 0 8px 24px rgba(30,42,71,0.12);
  --shadow-focus: 0 0 0 2px #EDEBE4, 0 0 0 4px #1E2A47;

  /* motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2,0,0.2,1);
  --ease-enter: cubic-bezier(0,0,0.2,1);
  --ease-exit: cubic-bezier(0.4,0,1,1);

  /* layout */
  --content-max: 720px;
  --wide-max: 1120px;
  --hit-target-min: 44px;

  /* breakpoints — recorded values. CSS cannot read a custom property inside a
     media query, so the step-ups below restate them; JS reads these. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* horizontal page margin — steps up with viewport (see media queries below) */
  --gutter-inline: var(--space-6);

  /* vertical rhythm between page sections */
  --section-y: var(--space-9);

  /* smallest column an auto-fit grid may hold before it wraps */
  --grid-min: 240px;

  /* brand placement sizes on a page (L916 §4 minimum is 16px) */
  --mark-size: 44px;
  --lockup-height: 76px;
  /* header brand set as live text: the full lockup SVG is only licensed at
     640x230 and above (L916 §4), so the header uses mark + wordmark and the
     tagline drops rather than being scaled down. */
  --wordmark-size: 28px;
  --wordmark-tracking: 0.06em;
  /* Placing the mark beside live Devanagari: both horizontals must be one line.
     Derived, not chosen — the mark's bar is 6.9% of its box and starts at 17.5%
     (mark-sa.svg); Noto Serif Devanagari's shirorekha is 0.066em thick and sits
     0.618em above the baseline. Solving for a matching bar gives these two. */
  --shiro-mark-height: 0.95em;
  --shiro-mark-drop: 0.168em;
}

@media (min-width: 768px) {
  :root {
    --gutter-inline: var(--space-8);
    --section-y: var(--space-10);
    --type-sanskrit-display-size: 76px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter-inline: var(--space-9);
    --section-y: var(--space-11);
    --type-sanskrit-display-size: 96px;
  }
}

[lang="he"], [dir="rtl"] {
  --font-display: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-prose: 'Frank Ruhl Libre', serif;
}

[data-theme="dark"] {
  --color-bg: #141C2F;
  --color-surface: #1E2A47;
  --color-surface-raised: #26334F;
  --color-surface-hover: #26334F;
  --color-surface-pressed: #2E3B58;
  --color-text: #EDEBE4;
  --color-text-secondary: #B3B4AE;
  --color-text-muted: #8E9096;
  --color-text-on-accent: #141C2F;
  --color-text-inverse: #1E2A47;
  --color-accent: #D79A38;
  --color-accent-text: #D79A38;
  --color-accent-hover: #E5AC4E;
  --color-accent-subtle: #33304A;
  --color-border: #2E3B58;
  --color-border-strong: #41506F;
  --color-border-accent: #D79A38;
  --color-focus: #EDEBE4;
  --color-focus-halo: #D79A38;
  --color-error: #E0908A;
  --color-error-surface: #3A2129;
  --color-success: #87BFA0;
  --color-success-surface: #1D3A2E;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-focus: 0 0 0 2px #141C2F, 0 0 0 4px #EDEBE4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #141C2F;
    --color-surface: #1E2A47;
    --color-surface-raised: #26334F;
    --color-surface-hover: #26334F;
    --color-surface-pressed: #2E3B58;
    --color-text: #EDEBE4;
    --color-text-secondary: #B3B4AE;
    --color-text-muted: #8E9096;
    --color-text-on-accent: #141C2F;
    --color-text-inverse: #1E2A47;
    --color-accent: #D79A38;
    --color-accent-text: #D79A38;
    --color-accent-hover: #E5AC4E;
    --color-accent-subtle: #33304A;
    --color-border: #2E3B58;
    --color-border-strong: #41506F;
    --color-border-accent: #D79A38;
    --color-focus: #EDEBE4;
    --color-focus-halo: #D79A38;
    --color-error: #E0908A;
    --color-error-surface: #3A2129;
    --color-success: #87BFA0;
    --color-success-surface: #1D3A2E;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-focus: 0 0 0 2px #141C2F, 0 0 0 4px #EDEBE4;
  }
}

/* ---- type classes ---- */

.t-display-1 {
  font-family: var(--font-display);
  font-size: var(--type-display-1-size);
  line-height: var(--type-display-1-lh);
  font-weight: var(--type-display-1-weight);
  letter-spacing: var(--type-display-1-tracking);
}
[lang="he"] .t-display-1, [dir="rtl"] .t-display-1 {
  font-size: 54px;
  line-height: 1.15;
}

.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--type-display-2-size);
  line-height: var(--type-display-2-lh);
  font-weight: var(--type-display-2-weight);
  letter-spacing: var(--type-display-2-tracking);
}
[lang="he"] .t-display-2, [dir="rtl"] .t-display-2 {
  font-size: 38px;
  line-height: 1.2;
}

.t-heading-1 {
  font-family: var(--font-display);
  font-size: var(--type-heading-1-size);
  line-height: var(--type-heading-1-lh);
  font-weight: var(--type-heading-1-weight);
  letter-spacing: var(--type-heading-1-tracking);
}
[lang="he"] .t-heading-1, [dir="rtl"] .t-heading-1 {
  font-size: 29px;
  line-height: 1.3;
}

.t-heading-2 {
  font-family: var(--font-display);
  font-size: var(--type-heading-2-size);
  line-height: var(--type-heading-2-lh);
  font-weight: var(--type-heading-2-weight);
  letter-spacing: var(--type-heading-2-tracking);
}
[lang="he"] .t-heading-2, [dir="rtl"] .t-heading-2 {
  font-size: 23px;
  line-height: 1.4;
}

.t-body-lg {
  font-family: var(--font-prose);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
  font-weight: var(--type-body-lg-weight);
}
[lang="he"] .t-body-lg, [dir="rtl"] .t-body-lg {
  font-size: 19px;
  line-height: 1.75;
}

.t-body {
  font-family: var(--font-prose);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-weight);
}
[lang="he"] .t-body, [dir="rtl"] .t-body {
  font-size: 17px;
  line-height: 1.8;
}

.t-body-sm {
  font-family: var(--font-prose);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  font-weight: var(--type-body-sm-weight);
}
[lang="he"] .t-body-sm, [dir="rtl"] .t-body-sm {
  font-size: 15px;
  line-height: 1.75;
}

.t-ui-lg {
  font-family: var(--font-ui);
  font-size: var(--type-ui-lg-size);
  line-height: var(--type-ui-lg-lh);
  font-weight: var(--type-ui-lg-weight);
}

.t-ui {
  font-family: var(--font-ui);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-lh);
  font-weight: var(--type-ui-weight);
}

.t-ui-strong {
  font-family: var(--font-ui);
  font-size: var(--type-ui-strong-size);
  line-height: var(--type-ui-strong-lh);
  font-weight: var(--type-ui-strong-weight);
}

.t-ui-sm {
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--type-ui-sm-size);
  line-height: var(--type-ui-sm-lh);
  font-weight: var(--type-ui-sm-weight);
  letter-spacing: var(--type-ui-sm-tracking);
}
[lang="he"] .t-ui-sm, [dir="rtl"] .t-ui-sm {
  color: var(--color-text-secondary);
  letter-spacing: 0;
}

.t-label {
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--type-label-size);
  line-height: var(--type-label-lh);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
}
[lang="he"] .t-label, [dir="rtl"] .t-label {
  color: var(--color-text-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.t-sanskrit {
  font-family: var(--font-deva);
  font-size: var(--type-sanskrit-size);
  line-height: var(--type-sanskrit-lh);
  font-weight: var(--type-sanskrit-weight);
}

.t-sanskrit-display {
  font-family: var(--font-deva);
  font-size: var(--type-sanskrit-display-size);
  line-height: var(--type-sanskrit-display-lh);
  font-weight: var(--type-sanskrit-display-weight);
}

.t-sanskrit-inline {
  font-family: var(--font-deva);
  font-size: var(--type-sanskrit-inline-size);
  line-height: var(--type-sanskrit-inline-lh);
  font-weight: var(--type-sanskrit-inline-weight);
}

/* ---- bidi guards ---- */

[dir="rtl"] { text-align: right; }
[dir="rtl"] .num, [dir="rtl"] .latn { unicode-bidi: isolate; direction: ltr; }

/* ---- focus ---- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- accent guard ----
   --color-accent (#C0872A) is 2.6:1 on paper: decoration only.
   Use --color-accent-text for marigold-coloured text.
   A marigold button carries an ink label (--color-text-on-accent), never paper.

   ---- muted-text guard ----
   --color-text-muted (#7A7365) is 3.94:1 on the paper ground: barred from any text below
   24px, or below 19px bold. That includes every label, table header, caption and eyebrow —
   use --color-text-secondary (#5B5548, 6.2:1) there. text-muted is for large display text,
   disabled states and non-text marks only. .t-label and .t-ui-sm default to text-secondary.

   ---- one-marigold rule ----
   One marigold horizontal per composition. Where the mark is present, its bar IS that
   horizontal — any other marigold rule (logo tie, rule under a headline, divider) withdraws.
   Applies to lockups, OG images, hero sections and email headers alike. */