/* ==========================================================================
   PromptBook flagship design tokens (2026-11-07). OWNER: D (design lead).
   FROZEN by docs/01-CONTRACT.md section 5. Builders link it; they never edit it.
   A change request goes to docs/diffs/<agent>-pb-tokens.css.md.

   Theme rule (site design system, as in prompt_generator/assets/css/tokens.css):
   light is the default; dark follows the OS (prefers-color-scheme). There is no
   in-page toggle. A page that must stay dark (the PromptBook app, promptbook.php,
   which is dark-only today) sets data-pb-theme="dark" on <html> or <body>;
   data-pb-theme="light" forces light. Every contrast pair below was measured
   (WCAG 2.x relative luminance) and is >= 4.5:1 for text, >= 3:1 for UI edges.

   Children's surfaces use --pb-font-*-local stacks only: NO third-party font
   request may be made from a children's page (contract section 6.4).
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---- Ground and surfaces ---- */
    --pb-bg: #ffffff;
    --pb-bg-2: #f6f5fb;            /* bands, alternate sections */
    --pb-surface: #ffffff;         /* cards, dialogs */
    --pb-surface-2: #f6f5fb;       /* inputs, wells */
    --pb-line: #e4e2ef;            /* hairlines (decorative) */
    --pb-line-strong: #8f8bab;     /* input borders, 3.3:1 on white (UI component) */

    /* ---- Text ---- */
    --pb-ink: #1c1a33;             /* 16.9:1 on --pb-bg */
    --pb-muted: #5b5875;           /* 6.8:1 on --pb-bg, 6.3:1 on --pb-bg-2 */
    --pb-subtle: #6b6888;          /* 5.3:1, captions only */

    /* ---- Brand ---- */
    --pb-accent: #4f46e5;          /* link + primary button bg; white text on it 6.3:1 */
    --pb-accent-hover: #4338ca;    /* 7.3:1 */
    --pb-accent-ink: #ffffff;      /* text on --pb-accent */
    --pb-link: #4f46e5;            /* links in light: 6.3:1 (dark themes override) */
    --pb-accent-soft: #eef0ff;     /* chip / selected bg */
    --pb-lilac: #6d28d9;           /* eyebrow / italic accent in light */
    --pb-gold: #b45309;            /* "Featured", "Example book" badge text, 5.0:1 */

    /* ---- Status ---- */
    --pb-good: #047857;            /* 5.5:1 */
    --pb-warn: #b45309;            /* 5.0:1 */
    --pb-bad: #b91c1c;             /* 6.5:1 */
    --pb-good-soft: #ecfdf5;
    --pb-warn-soft: #fffbeb;
    --pb-bad-soft: #fef2f2;

    /* ---- Book page (reader). Prose pages follow the theme; picture-book pages are always paper. ---- */
    --pb-page: #fffdf8;
    --pb-page-ink: #263146;        /* 12.8:1 */
    --pb-page-muted: #5e6a7d;
    --pb-picture-page: #fffdf8;    /* never themed: illustrations are painted for white paper */
    --pb-picture-ink: #263146;

    /* ---- Focus (WCAG 2.2 2.4.11/2.4.13) ---- */
    --pb-focus: #4f46e5;
    --pb-focus-ring: 0 0 0 3px var(--pb-bg), 0 0 0 6px var(--pb-focus);

    /* ---- Type ---- */
    --pb-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pb-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --pb-font-read: "Literata", Georgia, "Times New Roman", serif;
    --pb-font-child: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Local-only stacks for children's surfaces (no web-font request) */
    --pb-font-ui-local: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --pb-font-read-local: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --pb-font-child-local: ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, "Segoe UI", sans-serif;

    --pb-text-xs: 0.78rem;
    --pb-text-sm: 0.9rem;
    --pb-text-md: 1rem;            /* never below 16px for inputs (iOS zoom) */
    --pb-text-lg: 1.125rem;
    --pb-text-read: clamp(1.06rem, 0.98rem + 0.35vw, 1.2rem);
    --pb-text-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    --pb-text-h2: clamp(1.45rem, 1.2rem + 1vw, 2rem);
    --pb-text-h1: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
    --pb-leading: 1.6;
    --pb-leading-read: 1.75;
    --pb-measure: 68ch;            /* reading column */

    /* ---- Space (4px scale) ---- */
    --pb-s1: 4px;  --pb-s2: 8px;  --pb-s3: 12px; --pb-s4: 16px;
    --pb-s5: 24px; --pb-s6: 32px; --pb-s7: 48px; --pb-s8: 64px;
    --pb-gutter: 16px;             /* page side gutter at 320px */
    --pb-wrap: 1120px;             /* max content width */

    /* ---- Shape and depth ---- */
    --pb-radius-sm: 8px;
    --pb-radius: 14px;
    --pb-radius-lg: 18px;
    --pb-radius-pill: 999px;
    --pb-shadow-1: 0 1px 2px rgba(20, 18, 50, 0.06), 0 2px 8px rgba(20, 18, 50, 0.06);
    --pb-shadow-2: 0 12px 40px rgba(20, 18, 50, 0.14);
    --pb-cover-shadow: 0 10px 30px rgba(20, 18, 50, 0.22);

    /* ---- Controls ---- */
    --pb-tap: 44px;                /* min height of primary controls (2.5.8 floor is 24px) */
    --pb-dur: 160ms;
    --pb-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pb-z-sticky: 40;
    --pb-z-dialog: 20000;          /* above Keeper (memory: consent gate 20000) */
}

/* OS dark, unless the page forces light */
@media (prefers-color-scheme: dark) {
    :root:not([data-pb-theme="light"]) {
        color-scheme: dark;
        --pb-bg: #0d0c1d;          /* = site ground, so nav/footer and page are one plane */
        --pb-bg-2: #13122a;
        --pb-surface: #1a1935;
        --pb-surface-2: #13122a;
        --pb-line: rgba(196, 190, 255, 0.14);
        --pb-line-strong: #6f6c92;
        --pb-ink: #f3f1ff;         /* 17.3:1 */
        --pb-muted: #aeabca;       /* 8.7:1 on bg, 7.7:1 on surface */
        --pb-subtle: #8d8aab;      /* 5.5:1 on --pb-bg-2 */
        --pb-accent: #4f46e5;      /* button bg stays (white text 6.3:1) */
        --pb-accent-hover: #4338ca;
        --pb-accent-soft: rgba(124, 124, 246, 0.16);
        --pb-link: #c4b5fd;        /* links on dark: 10.5:1 (accent itself is only 3.1:1 on dark) */
        --pb-lilac: #c4b5fd;
        --pb-gold: #fbbf24;        /* 11.6:1 */
        --pb-good: #34d399;
        --pb-warn: #fbbf24;
        --pb-bad: #fca5a5;
        --pb-good-soft: rgba(52, 211, 153, 0.12);
        --pb-warn-soft: rgba(251, 191, 36, 0.12);
        --pb-bad-soft: rgba(252, 165, 165, 0.12);
        --pb-page: #191826;
        --pb-page-ink: #e9e6f5;    /* 14.3:1 */
        --pb-page-muted: #aeabca;
        --pb-focus: #c4b5fd;
        --pb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
        --pb-shadow-2: 0 24px 60px rgba(0, 0, 0, 0.45);
        --pb-cover-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    }
}

/* Forced dark (the PromptBook app) — identical values to the OS-dark block */
[data-pb-theme="dark"] {
    color-scheme: dark;
    --pb-bg: #0d0c1d;
    --pb-bg-2: #13122a;
    --pb-surface: #1a1935;
    --pb-surface-2: #13122a;
    --pb-line: rgba(196, 190, 255, 0.14);
    --pb-line-strong: #6f6c92;
    --pb-ink: #f3f1ff;
    --pb-muted: #aeabca;
    --pb-subtle: #8d8aab;
    --pb-accent: #4f46e5;
    --pb-accent-hover: #4338ca;
    --pb-accent-soft: rgba(124, 124, 246, 0.16);
    --pb-link: #c4b5fd;
    --pb-lilac: #c4b5fd;
    --pb-gold: #fbbf24;
    --pb-good: #34d399;
    --pb-warn: #fbbf24;
    --pb-bad: #fca5a5;
    --pb-good-soft: rgba(52, 211, 153, 0.12);
    --pb-warn-soft: rgba(251, 191, 36, 0.12);
    --pb-bad-soft: rgba(252, 165, 165, 0.12);
    --pb-page: #191826;
    --pb-page-ink: #e9e6f5;
    --pb-page-muted: #aeabca;
    --pb-focus: #c4b5fd;
    --pb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --pb-shadow-2: 0 24px 60px rgba(0, 0, 0, 0.45);
    --pb-cover-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

/* ---- Shared primitives every surface may use (prefix pb-) ---- */
.pb-focusable:focus-visible,
.pb-btn:focus-visible,
.pb-chip:focus-visible,
.pb-scope a:focus-visible,
.pb-scope button:focus-visible,
.pb-scope input:focus-visible,
.pb-scope select:focus-visible,
.pb-scope textarea:focus-visible,
.pb-scope summary:focus-visible,
.pb-scope [tabindex]:focus-visible {
    outline: 3px solid var(--pb-focus);
    outline-offset: 2px;
}

.pb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pb-s2);
    min-height: var(--pb-tap); padding: 0 var(--pb-s5);
    border-radius: var(--pb-radius-pill); border: 1px solid transparent;
    font: 600 var(--pb-text-md)/1.2 var(--pb-font-ui); text-decoration: none; cursor: pointer;
    transition: background-color var(--pb-dur) var(--pb-ease), border-color var(--pb-dur) var(--pb-ease);
}
.pb-btn-primary { background: var(--pb-accent); color: var(--pb-accent-ink); }
.pb-btn-primary:hover { background: var(--pb-accent-hover); }
.pb-btn-ghost { background: transparent; color: var(--pb-ink); border-color: var(--pb-line-strong); }
.pb-btn-ghost:hover { border-color: var(--pb-link); }
.pb-btn[disabled], .pb-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.pb-chip {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--pb-s3);
    border-radius: var(--pb-radius-pill); border: 1px solid var(--pb-line-strong);
    color: var(--pb-ink); background: var(--pb-surface); font: 500 var(--pb-text-sm)/1 var(--pb-font-ui);
    text-decoration: none;
}
.pb-chip[aria-pressed="true"], .pb-chip[aria-current="page"] { background: var(--pb-accent-soft); border-color: var(--pb-link); }

.pb-badge {
    display: inline-flex; align-items: center; gap: var(--pb-s1); padding: 2px var(--pb-s2);
    border-radius: var(--pb-radius-sm); font: 700 var(--pb-text-xs)/1.4 var(--pb-font-ui);
    letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid currentColor;
}
.pb-badge-example, .pb-badge-featured { color: var(--pb-gold); }

.pb-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pb-wrap { max-width: var(--pb-wrap); margin-inline: auto; padding-inline: var(--pb-gutter); }
@media (min-width: 768px) { .pb-wrap { padding-inline: var(--pb-s5); } }

@media (prefers-reduced-motion: reduce) {
    .pb-scope *, .pb-scope *::before, .pb-scope *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
}