/**
 * Design tokens (blueprint section 110).
 *
 * The palette is drawn from temple materials rather than from religious
 * iconography: weathered granite, sandstone, bronze lamp metal and the deep
 * green of a temple tank. Section 109 explicitly warns against saffron-heavy,
 * poster-like design, so saffron appears nowhere in the base palette.
 *
 * Nothing in the components layer may hard-code a colour, radius or spacing
 * value - it must reference a token here.
 */

:root {
  color-scheme: light dark;

  /* --- Brand ------------------------------------------------------------ */
  --kt-bronze-50: #fbf6f1;
  --kt-bronze-100: #f2e5d7;
  --kt-bronze-200: #e3c9ae;
  --kt-bronze-300: #e0b877;
  --kt-bronze-400: #b58252;
  --kt-bronze-500: #b87534;
  --kt-bronze-600: #8a4b2a;
  --kt-bronze-700: #6f3b20;
  --kt-bronze-800: #552d19;

  --kt-teal-50: #eef6f4;
  --kt-teal-100: #cfe6e1;
  --kt-teal-500: #1f7268;
  --kt-teal-600: #14584f;
  --kt-teal-700: #0f423b;

  /* --- Neutrals (warm stone) -------------------------------------------- */
  --kt-stone-0: #ffffff;
  --kt-stone-50: #faf8f5;
  --kt-stone-100: #f3efe9;
  --kt-stone-200: #e7e1d9;
  --kt-stone-300: #d5cdc2;
  --kt-stone-400: #a9a096;
  --kt-stone-500: #7d746a;
  --kt-stone-600: #5c554d;
  --kt-stone-700: #403a34;
  --kt-stone-800: #292421;
  --kt-stone-900: #1c1917;
  --kt-stone-950: #121010;
  /* Dark-first surfaces: charcoal with a trace of brown, never pure black.
     Pure black makes every border disappear and every photograph float. */
  --kt-char-900: #16130f;
  --kt-char-800: #1e1a15;
  --kt-char-700: #26211b;

  /* --- Semantic --------------------------------------------------------- */
  --color-bg: #f8f5f0;
  --color-bg-subtle: #f1ece5;
  --color-surface: #fffdf9;
  --color-surface-raised: #ffffff;
  --color-border: #e4ddd4;
  --color-border-strong: #cec3b7;

  --color-text: var(--kt-stone-900);
  --color-text-muted: var(--kt-stone-500);
  --color-text-inverse: var(--kt-stone-0);

  /* Bronze 600 keeps white button text above WCAG AA contrast. */
  --color-primary: var(--kt-bronze-600);
  --color-primary-hover: var(--kt-bronze-700);
  --color-primary-soft: var(--kt-bronze-50);
  --color-primary-border: var(--kt-bronze-200);
  --color-on-primary: #ffffff;

  --color-accent: var(--kt-teal-600);
  --color-accent-soft: var(--kt-teal-50);

  --color-success: #1f7a4d;
  --color-success-soft: #e8f4ee;
  --color-warning: #9a6412;
  --color-warning-soft: #fbf1de;
  --color-danger: #a3302a;
  --color-danger-soft: #fbeceb;
  --color-info: var(--kt-teal-600);
  --color-info-soft: var(--kt-teal-50);

  /* Trust ladder colours (blueprint sections 58, 60, 150) */
  --color-verified: #1f7a4d;
  --color-sourced: var(--kt-teal-600);
  --color-community: #9a6412;
  --color-unverified: var(--kt-stone-500);
  --color-disputed: #a3302a;

  /* --- Spacing ---------------------------------------------------------- */
  --space-0: 0;
  --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;

  /* --- Radius ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-2xl: 34px;
  --radius-pill: 999px;

  /* --- Typography ------------------------------------------------------- */
  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari',
    'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Kannada', 'Noto Sans Malayalam',
    'Noto Sans Bengali', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Nirmala UI', Arial, sans-serif;
  --font-serif:
    'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Noto Serif',
    'Noto Serif Devanagari', 'Noto Serif Tamil', serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 680;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(45, 34, 25, 0.05);
  --shadow-sm: 0 2px 8px rgba(45, 34, 25, 0.07), 0 1px 2px rgba(45, 34, 25, 0.04);
  --shadow-md: 0 8px 24px rgba(45, 34, 25, 0.09);
  --shadow-lg: 0 22px 56px rgba(45, 34, 25, 0.14);

  /* --- Layout ----------------------------------------------------------- */
  --header-height: 4rem;
  --tabbar-height: 4.25rem;
  --content-max: 74rem;
  --reading-max: 42rem;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #151310;
    --color-bg-subtle: #1d1915;
    --color-surface: #211d18;
    --color-surface-raised: #2a241e;
    --color-border: #413931;
    --color-border-strong: #5b5047;

    --color-text: #f6f0e8;
    --color-text-muted: #b8aea4;
    --color-text-inverse: var(--kt-stone-900);

    --color-primary: var(--kt-bronze-300);
    --color-primary-hover: var(--kt-bronze-200);
    --color-primary-soft: #2a1e16;
    --color-primary-border: #4a3527;
    --color-on-primary: var(--kt-stone-950);

    --color-accent: #6fbdb0;
    --color-accent-soft: #102b27;

    --color-success: #5fbf8b;
    --color-success-soft: #122a1e;
    --color-warning: #d6a75a;
    --color-warning-soft: #2c2313;
    --color-danger: #e08b85;
    --color-danger-soft: #2e1917;
    --color-info: #6fbdb0;
    --color-info-soft: #102b27;

    --color-verified: #5fbf8b;
    --color-sourced: #6fbdb0;
    --color-community: #d6a75a;
    --color-unverified: #a9a096;
    --color-disputed: #e08b85;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

/* Respect the operating system's reduced-motion setting (section 112). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-base: 1ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * An explicit choice, when the reader has made one.
 *
 * `prefers-color-scheme` above is the default. These attribute selectors are
 * written after it and with the same specificity path, so a reader who picks
 * light on a device set to dark gets light — which is the whole point of
 * offering the control.
 */
:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #151310;
  --color-bg-subtle: #1d1915;
  --color-surface: #211d18;
  --color-surface-raised: #2a241e;
  /* Lifted from #322c28. A card at `char-800` sits ~4% above a `char-900`
     page, which disappears completely on a phone screen in daylight — the
     border is what makes a card look like a card, so it carries the
     separation rather than brightening every surface. */
  --color-border: #413931;
  --color-border-strong: #5b5047;

  --color-text: #f6f0e8;
  --color-text-muted: #b8aea4;
  --color-text-inverse: var(--kt-stone-900);

  --color-primary: var(--kt-bronze-300);
  --color-primary-hover: var(--kt-bronze-200);
  --color-primary-soft: #2a1e16;
  --color-primary-border: #4a3527;
  --color-on-primary: var(--kt-stone-950);

  --color-accent: #6fbdb0;
  --color-accent-soft: #102b27;

  --color-success: #5fbf8b;
  --color-success-soft: #122a1e;
  --color-warning: #d6a75a;
  --color-warning-soft: #2c2313;
  --color-danger: #e08b85;
  --color-danger-soft: #2e1917;
  --color-info: #6fbdb0;
  --color-info-soft: #102b27;

  --color-verified: #5fbf8b;
  --color-sourced: #6fbdb0;
  --color-community: #d6a75a;
  --color-unverified: #a9a096;
  --color-disputed: #e08b85;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}
:root[data-theme='light'] {
  color-scheme: light;
}