/*
    urhema_tokens.css — the design contract (Phase 0, corrected)

    SUPERSEDES an earlier draft of this file that used a --color-* naming
    scheme. That scheme doesn't match anything in the real codebase: the
    uploaded urhema.shell.css references 55 distinct --ub-* custom
    properties and zero --color-* ones. This file defines exactly those 55,
    derived directly from grepping every var(--ub-...) call in shell.css —
    nothing here is invented beyond what that file actually needs, except
    where called out explicitly below.

    Two groups:

      1. INVARIANT — type scale, spacing, radius, z-index, timing, font
         stacks, shell dimensions. Same across all three themes. Defined
         once, here, and never touched by urhema.theme.css.

      2. THEME-DEPENDENT — paper/ink/line/accent/shadow/hatch. Shown
         here at :root with LIGHT values as the pre-attribute fallback (in
         case anything ever renders before data-theme is set). Fully
         redefined per theme in urhema.theme.css — see that file for why
         "fully redefined, never partial" is the rule.

    Two judgment calls flagged inline where they occur — search for "FLAG"
    in this file, and see WIRING.md for the full reasoning on both.
*/

:root {
    /* ============ INVARIANT ============ */

    /* Fonts. --ub-font-heading and --ub-font-body currently point at the
       same serif stack (Merriweather) — the shell never asked for a
       separate display face, and the prototype didn't use one either.
       Weight/size/tracking do the differentiating (see .ub-wordmark).
       No --ub-font-mono: shell.css never references one. If a future
       feature needs monospace (verse refs, timestamps), add the token and
       the Google Fonts family together, not one without the other. */
    --ub-font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    --ub-font-body: 'Merriweather', Georgia, serif;
    --ub-font-heading: 'Merriweather', Georgia, serif;

    /* Type scale */
    --ub-text-xs: 0.75rem;     /* 12px — eyebrows, badges, fine print */
    --ub-text-sm: 0.8125rem;   /* 13px — nav links, buttons, UI chrome */
    --ub-text-base: 1rem;      /* 16px — body default */
    --ub-text-md: 1.0625rem;   /* 17px — verse popover text, expanded mobile nav */
    --ub-text-lg: 1.125rem;    /* 18px — wordmark, signup heading */
    --ub-text-xl: 1.375rem;    /* 22px — footer pulse stat numbers */
    --ub-text-2xl: 1.75rem;    /* 28px — page titles (study library heading, etc.) */

    /* Line height */
    --ub-leading-tight: 1.15;
    --ub-leading-snug: 1.35;
    --ub-leading-body: 1.6;
    --ub-leading-reading: 1.75; /* scripture text specifically — generous on purpose */

    /* Letter spacing */
    --ub-tracking-tight: -0.01em;
    --ub-tracking-eyebrow: 0.08em;

    /* Spacing scale (4px base grid). --ub-space-8 isn't referenced by
       shell.css yet but fills a gap in an otherwise 1–9 scale — cheap to
       have ready before the first component that needs it. */
    --ub-space-1: 0.25rem;
    --ub-space-2: 0.5rem;
    --ub-space-3: 0.75rem;
    --ub-space-4: 1rem;
    --ub-space-5: 1.5rem;
    --ub-space-6: 2rem;
    --ub-space-7: 3rem;
    --ub-space-8: 4rem;
    --ub-space-9: 5rem;

    /* Radius. --ub-radius-lg isn't referenced yet either — added for the
       modals/dialogs Phase 2+ will need, so that scale exists before it's
       urgently needed rather than getting invented ad hoc under deadline. */
    --ub-radius-sm: 0.5rem;
    --ub-radius-md: 0.875rem;
    --ub-radius-lg: 1.25rem;
    --ub-radius-pill: 999px;

    /* Motion */
    --ub-duration: 250ms;
    --ub-duration-fast: 150ms;
    --ub-ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Stacking order: header < menu < popover < dialog. Spaced out so a
       future layer can slot in between without renumbering everything. */
    --ub-z-header: 40;
    --ub-z-menu: 60;
    --ub-z-popover: 80;
    --ub-z-dialog: 100;

    /* Shell dimensions */
    --ub-width-shell: 80rem;                      /* 1280px, matches the prototype */
    --ub-width-reading: 42rem;                    /* ~65ch text measure — headers, prose columns */
    --ub-gutter: clamp(1.25rem, 4vw, 2.5rem);      /* fluid — one token, no per-breakpoint override needed */
    --ub-header-height: 4rem;                      /* 64px */

    /* ============ THEME-DEPENDENT (light values shown as fallback) ============ */

    --ub-paper: #FAFAFA;
    --ub-paper-sunken: #F3F4F6;
    --ub-paper-raised: #FFFFFF;

    --ub-ink: #111827;
    --ub-ink-soft: #4B5563;
    --ub-ink-muted: #5B6472;

    --ub-line: #E5E7EB;
    --ub-line-strong: #D1D5DB;
    --ub-rule: 1px solid var(--ub-line);
    --ub-rule-strong: 1px solid var(--ub-line-strong);

    --ub-accent-100: #FFE0D9;
    --ub-accent-500: #FF563C;
    --ub-accent-700: #E04A32;
    --ub-accent-contrast: #FFFFFF;

    /* Danger/error — added for form validation (urhema_auth.css). Deliberately a different
       hue (true red) from the coral brand accent, so an error never reads as the same signal
       as a CTA/Premium/brand accent. Fully redefined per theme in urhema_theme.css, same rule
       as every other theme-dependent token here — this is only the :root pre-attribute
       fallback, light theme's own values. WCAG-verified against all four themes' paper. */
    --ub-danger-500: #DC2626;
    --ub-danger-700: #B91C1C;

    /* Focus ring derives from this theme's own accent — see WIRING.md for
       why it's theme-dependent even though it looks like it could be static. */
    --ub-focus-ring: 0 0 0 3px rgba(255, 86, 60, 0.35);

    --ub-shadow-float: 0 12px 30px -8px rgba(17, 24, 39, 0.16);
    --ub-shadow-soft: 0 4px 20px -2px rgba(17, 24, 39, 0.05);
    --ub-hatch: repeating-linear-gradient(135deg, #f3f4f6 0 10px, #e5e7eb 10px 20px);
}