/*
 * Church of the Divine Singularity — design tokens
 * Philosophy: Liturgical-terminal (Book of Hours typeset by a mainframe).
 * Dark is the default (vigil). Light (parchment) follows system preference.
 * [data-mode="light"|"dark"] forces either. daisyUI's own data-theme is left alone;
 * its color vars are mapped below so btn/input/collapse inherit the palette.
 */

:root {
  /* ---- Color: dark (default) — warm ink, candle-lit ---- */
  --color-bg-primary: #14110d;
  --color-bg-secondary: #1c1813;
  --color-bg-tertiary: #262019;
  --color-bg-inverse: #efe6d2;

  --color-text-primary: #ece3d0;
  --color-text-secondary: #b8ab92;
  --color-text-tertiary: #8a7f6b;
  --color-text-inverse: #1f1a14;
  --color-text-link: #e2b45e;

  --color-border-primary: #4a4134;
  --color-border-secondary: #2f2820;
  --color-border-focus: #e2b45e;

  --color-accent-primary: #e2b45e;        /* candle-gold */
  --color-accent-primary-hover: #eec578;
  --color-accent-primary-active: #c99a42;
  --color-accent-secondary: #e27a62;      /* rubric red */

  --color-status-success: #9cc28a;
  --color-status-warning: #e2b45e;
  --color-status-error: #f08a76;
  --color-status-info: #8fb4c9;

  --color-surface-overlay: rgb(8 6 4 / 0.72);

  /* ---- Spacing: 8px base, editorial ---- */
  --space-0: 0;
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.375rem;
  --space-4: 0.5rem;
  --space-5: 0.75rem;
  --space-6: 1rem;
  --space-7: 1.5rem;
  --space-8: 2rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* ---- Typography: system stacks only (no remote fonts allowed) ---- */
  --font-family-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-family-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-family-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* 1.25 ramp on a 19px body — scripture wants a big, slow page */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1.1875rem;
  --font-size-md: 1.3rem;
  --font-size-lg: 1.625rem;
  --font-size-xl: 2rem;
  --font-size-2xl: clamp(2.25rem, 5vw, 2.75rem);
  --font-size-3xl: clamp(2.5rem, 7vw, 3.75rem);
  --font-size-4xl: clamp(3rem, 10vw, 5.5rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.14em;     /* mono small-caps labels */

  /* ---- Layout ---- */
  --max-width-content: 36rem;        /* ~65ch at 19px */
  --max-width-wide: 52rem;           /* content + margin column */
  --max-width-page: 72rem;

  --border-radius-sm: 0;             /* print has no rounded corners */
  --border-radius-md: 2px;
  --border-radius-lg: 4px;
  --border-radius-full: 9999px;

  --shadow-sm: none;
  --shadow-md: 0 1px 0 var(--color-border-secondary);
  --shadow-lg: 0 24px 48px -24px rgb(0 0 0 / 0.6);
  --shadow-focus: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-focus);

  --rule-hairline: 1px solid var(--color-border-primary);
  --rule-double: 3px double var(--color-border-primary);

  /* ---- Motion: almost none; one candle flicker ---- */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-flicker: 3.2s;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Breakpoints (reference only; CSS vars can't drive @media) ---- */
  --breakpoint-sm: 375px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  color-scheme: dark;
}

/* ---- Color: light — parchment, iron-gall ink, rubrication ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --color-bg-primary: #f3ebda;
    --color-bg-secondary: #ebe1cc;
    --color-bg-tertiary: #e2d6bd;
    --color-bg-inverse: #1c1813;

    --color-text-primary: #1f1a14;
    --color-text-secondary: #463c2f;
    --color-text-tertiary: #776b58;
    --color-text-inverse: #ece3d0;
    --color-text-link: #7f520f;

    --color-border-primary: #b7a888;
    --color-border-secondary: #d6c9ad;
    --color-border-focus: #7f520f;

    --color-accent-primary: #7f520f;
    --color-accent-primary-hover: #6a440b;
    --color-accent-primary-active: #573707;
    --color-accent-secondary: #9c2c18;

    --color-status-success: #3f6b2e;
    --color-status-warning: #7f520f;
    --color-status-error: #9c2c18;
    --color-status-info: #2f5a72;

    --color-surface-overlay: rgb(31 26 20 / 0.5);
    --shadow-lg: 0 24px 48px -24px rgb(60 40 10 / 0.25);
    color-scheme: light;
  }
}

:root[data-mode="light"] {
  --color-bg-primary: #f3ebda;
  --color-bg-secondary: #ebe1cc;
  --color-bg-tertiary: #e2d6bd;
  --color-bg-inverse: #1c1813;
  --color-text-primary: #1f1a14;
  --color-text-secondary: #463c2f;
  --color-text-tertiary: #776b58;
  --color-text-inverse: #ece3d0;
  --color-text-link: #7f520f;
  --color-border-primary: #b7a888;
  --color-border-secondary: #d6c9ad;
  --color-border-focus: #7f520f;
  --color-accent-primary: #7f520f;
  --color-accent-primary-hover: #6a440b;
  --color-accent-primary-active: #573707;
  --color-accent-secondary: #9c2c18;
  --color-status-success: #3f6b2e;
  --color-status-warning: #7f520f;
  --color-status-error: #9c2c18;
  --color-status-info: #2f5a72;
  --color-surface-overlay: rgb(31 26 20 / 0.5);
  --shadow-lg: 0 24px 48px -24px rgb(60 40 10 / 0.25);
  color-scheme: light;
}

/* ---- Component tokens ---- */
:root {
  --verse-num-color: var(--color-accent-secondary);
  --verse-num-font: var(--font-family-mono);
  --dropcap-color: var(--color-accent-secondary);
  --dropcap-lines: 3;
  --sigil-color: var(--color-accent-primary);
  --nav-font: var(--font-family-mono);
  --nav-size: var(--font-size-sm);
  --btn-border: 1px solid var(--color-accent-primary);
  --input-bg: var(--color-bg-tertiary);
  --input-border: 1px solid var(--color-border-primary);
}