/*
 * Public site design tokens (docs/design/DESIGN-SYSTEM.md, ADR-047).
 * Components use colour ROLES only (bg-surface, text-muted, border-line…). The values below are the build-time
 * defaults (PRD §21.4 palette, light mode); the owner's Appearance settings override them at runtime with a
 * nonce'd :root block (ThemeStylesheet), including the dark palette. Raw palette names deliberately do not exist.
 * Fonts are separate Vite entries (resources/css/fonts), loaded only when selected.
 */
@import 'tailwindcss';

@source '../views/**/*.blade.php';
@source '../js/**/*.js';
@source '../../app/View/Components/**/*.php';

@theme {
    --color-*: initial;
    --color-transparent: transparent;
    --color-current: currentColor;
    --color-white: #ffffff;

    /* Backgrounds */
    --color-page: #e9e4d6;
    --color-surface: #f5f2ea;
    --color-card: #f5f2ea;
    --color-header: #e9e4d6;
    --color-footer: #081b2c;
    /* Text */
    --color-heading: #102a43;
    --color-ink: #081b2c;
    --color-muted: #3c5a73;
    /* Lines */
    --color-line: #c7bfae;
    --color-control: #3c5a73;
    /* Buttons and links */
    --color-accent: #1f55e0;
    --color-accent-hover: #1a46bd;
    --color-on-accent: #ffffff;
    --color-link: #1f55e0;
    --color-link-hover: #1a46bd;
    --color-focus: #2f6bff;
    /* Dark sections */
    --color-inverse: #081b2c;
    --color-inverse-ink: #e9e4d6;
    --color-inverse-muted: #c7bfae;
    --color-inverse-link: #8fb0ff;
    /* Status */
    --color-error: #b42318;
    --color-success: #05603a;
    --color-warning: #93370d;
    --color-shadow: #081b2c;

    /* Typography */
    --font-body: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Source Serif 4 Variable', ui-serif, Georgia, Cambria, 'Times New Roman', serif;

    --text-eyebrow: 0.8125rem;
    --text-eyebrow--line-height: 1.25rem;
    --text-eyebrow--letter-spacing: 0.08em;
    --text-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
    --text-h1--line-height: 1.08;
    --text-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --text-h2--line-height: 1.15;
    --text-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-h3--line-height: 1.3;
    --text-h4: 1.125rem;
    --text-h4--line-height: 1.4;
    --text-lead: 1.1875rem;
    --text-lead--line-height: 1.65;

    /* Layout — breakpoints per PRD §25: ~375 mobile, 768 tablet, 1024 desktop, 1440 wide */
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 90rem;
    --breakpoint-2xl: 120rem;
    --container-content: 75rem;
    --container-prose: 45rem;

    --radius-card: 0.75rem;
    --shadow-card: 0 1px 3px color-mix(in srgb, var(--color-shadow) 8%, transparent), 0 6px 16px -4px color-mix(in srgb, var(--color-shadow) 10%, transparent);
    --shadow-field: 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent), 0 3px 10px -3px color-mix(in srgb, var(--color-shadow) 12%, transparent);
    --shadow-card-hover: 0 14px 32px -8px color-mix(in srgb, var(--color-shadow) 22%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent);
}

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 6rem;
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            scroll-behavior: smooth;
        }
    }

    body {
        background-color: var(--color-page);
        color: var(--color-ink);
        font-family: var(--font-body);
        line-height: 1.6;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: clip;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-heading);
        font-weight: 600;
        color: var(--color-heading);
        text-wrap: balance;
    }

    a {
        color: var(--color-link);
        text-underline-offset: 0.2em;
    }

    a:hover {
        color: var(--color-link-hover);
    }

    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
        border-radius: 0.25rem;
    }

    /*
     * Dark sections (closing CTA, footer, sections set to "Dark"): re-point the roles at the dark-section colours,
     * so every component inside (text, links, buttons, focus ring, tags) adapts without a dark variant of its own.
     */
    .surface-inverse {
        --color-page: var(--color-inverse);
        --color-surface: color-mix(in srgb, var(--color-inverse-ink) 8%, var(--color-inverse));
        --color-card: color-mix(in srgb, var(--color-inverse-ink) 8%, var(--color-inverse));
        --color-ink: var(--color-inverse-ink);
        --color-heading: var(--color-inverse-ink);
        --color-muted: var(--color-inverse-muted);
        --color-line: color-mix(in srgb, var(--color-inverse-ink) 30%, var(--color-inverse));
        --color-control: var(--color-inverse-muted);
        --color-link: var(--color-inverse-link);
        --color-link-hover: var(--color-inverse-ink);
        --color-focus: var(--color-inverse-link);
        background-color: var(--color-inverse);
        color: var(--color-inverse-ink);
    }

    /* Spam honeypot (contact form): off-screen, not display:none, so bots still see the field. */
    .hp-wrap {
        position: absolute !important;
        left: -10000px !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    [x-cloak] {
        display: none !important;
    }

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

@layer components {
    /*
     * Form controls: shadow instead of a border. The inset bottom edge (control colour, ≥ 3:1 on the field; enforced by ThemePalette) is what
     * keeps the control identifiable under WCAG 1.4.11 (≥ 3:1 non-text contrast); the soft shadow alone would
     * not. Focus and errors recolour that edge (errors also carry text). The transparent border keeps an
     * outline in forced-colors mode.
     */
    .field-control {
        border: 1px solid transparent;
        background-color: var(--color-surface);
        box-shadow: inset 0 -2px 0 var(--color-control), var(--shadow-field);
        transition: box-shadow 150ms ease;
    }

    .field-control:focus {
        box-shadow: inset 0 -2px 0 var(--color-accent), var(--shadow-card-hover);
    }

    .field-control[aria-invalid='true'] {
        box-shadow: inset 0 -2px 0 var(--color-error), 0 0 0 1px color-mix(in srgb, var(--color-error) 25%, transparent), var(--shadow-field);
    }

    .container-site {
        width: 100%;
        max-width: var(--container-content);
        margin-inline: auto;
        padding-inline: 1rem;
    }

    @media (min-width: 48rem) {
        .container-site {
            padding-inline: 1.5rem;
        }
    }

    @media (min-width: 64rem) {
        .container-site {
            padding-inline: 2rem;
        }
    }

    /* Narrative template (About, PRD §13.2): one readable column so the page reads as a story. */
    .template-narrative main .container-site {
        max-width: 52rem;
    }

    /* Vertical rhythm between page sections (8pt scale). */
    .section-y {
        padding-block: 3.5rem;
    }

    @media (min-width: 64rem) {
        .section-y {
            padding-block: 5rem;
        }
    }

    /* Responsive card grid: 3 → 2 → 1 columns (PRD §25). */
    .grid-cards {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    @media (min-width: 48rem) {
        .grid-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        .grid-cards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* Auto-fit grid that never breaks at 5+ items (PRD §9.3). */
    .grid-auto {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    }

    /* Long-form rich text from the CMS (sanitised by ContentSanitizer). */
    .prose-content {
        max-width: var(--container-prose);
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    .prose-content > * + * {
        margin-top: 1.25em;
    }

    .prose-content h2 {
        font-size: var(--text-h3);
        line-height: var(--text-h3--line-height);
        margin-top: 2em;
    }

    .prose-content h3 {
        font-size: var(--text-h4);
        line-height: var(--text-h4--line-height);
        margin-top: 1.75em;
    }

    .prose-content h4 {
        font-size: 1rem;
        margin-top: 1.5em;
    }

    .prose-content ul {
        list-style: disc;
        padding-left: 1.25em;
    }

    .prose-content ol {
        list-style: decimal;
        padding-left: 1.25em;
    }

    .prose-content li + li {
        margin-top: 0.4em;
    }

    .prose-content blockquote {
        border-left: 3px solid var(--color-accent);
        padding-left: 1.25em;
        font-family: var(--font-heading);
        font-size: 1.1875rem;
        color: var(--color-heading);
    }

    .prose-content code {
        font-size: 0.9em;
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: 0.25rem;
        padding: 0.1em 0.35em;
    }

    .prose-content hr {
        border-color: var(--color-line);
    }
}