/*
 * lithopixel — site styles.
 *
 * brand.css (generated from _brand/brand.yaml, loaded first) carries Fraunces + Geist and maps
 * the Paper (light) palette to :root. The product default is Basalt (dark), so this file
 * re-declares the full palette: Basalt on :root, Paper behind html[data-theme="light"].
 * It also adds the type roles and tokens brand.css does not emit (mono, stamp, signals,
 * card/hover/border-strong) and the three motifs: ground, registration corners, stamps.
 *
 * Tailwind (CDN) utilities can use every token: bg-(--color-card), text-(--color-text-muted).
 */
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Silkscreen&display=swap");

@layer theme, base, components, utilities;

/* ---------------------------------------------------------------------------------------
 * Tokens — Basalt (dark) is the default.
 * ------------------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    --color-surface: #0f0f0e;        /* stone-000: page ground, creative ground */
    --color-surface-alt: #161615;    /* stone-100: top bar, footer, raised bands */
    --color-card: #1e1e1c;           /* stone-200 */
    --color-hover: #262624;          /* stone-300 */
    --color-border: #3a3a36;         /* stone-400: hairlines */
    --color-border-strong: #55554f;  /* stone-500 */
    --color-text-muted: #93938b;     /* stone-600 */
    --color-secondary: #b9b9af;      /* stone-700 */
    --color-text: #f4f4ee;           /* stone-800: ink */

    --color-primary: #34d9d9;        /* cyan: action, selection, focus */
    --color-on-primary: #0f0f0e;
    --color-accent: #f25de2;         /* magenta: live */
    --color-live: #f25de2;
    --color-proof: #efdf4f;          /* yellow: proof */
    --color-danger: #ff6a5e;         /* red: rejected, destructive */
    --color-success: #8ae06a;        /* lime: approved */
    --color-info: #7c94ff;           /* blue: informational, archived */

    --mark-k: #3a3a36;
    --mark-w: #ffffff;

    --ground-plus: #2c2c29;
    --ground-dot: #1f1f1d;
    --ground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 54.5v11M54.5 60h11' stroke='%232c2c29' stroke-width='1' fill='none'/%3E%3Cg fill='%23232321'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='24' y='0' width='1' height='1'/%3E%3Crect x='48' y='0' width='1' height='1'/%3E%3Crect x='72' y='0' width='1' height='1'/%3E%3Crect x='96' y='0' width='1' height='1'/%3E%3Crect x='0' y='24' width='1' height='1'/%3E%3Crect x='0' y='48' width='1' height='1'/%3E%3Crect x='0' y='72' width='1' height='1'/%3E%3Crect x='0' y='96' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");

    --font-heading: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "Geist", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Geist Mono", "SF Mono", Menlo, monospace;
    --font-stamp: "Silkscreen", "Geist Mono", monospace;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
}

/* Paper (light) — explicit opt-in only. */
html[data-theme="light"] {
    color-scheme: light;

    --color-surface: #f6f6f0;
    --color-surface-alt: #f0f0ea;
    --color-card: #e9e9e2;
    --color-hover: #e0e0d8;
    --color-border: #c9c9bf;
    --color-border-strong: #a9a99e;
    --color-text-muted: #5e5e57;
    --color-secondary: #3b3b36;
    --color-text: #141412;

    --color-primary: #0b7878;
    --color-on-primary: #f6f6f0;
    --color-accent: #9f1d93;
    --color-live: #9f1d93;
    --color-proof: #8a6d00;
    --color-danger: #b8321f;
    --color-success: #2e7a1c;
    --color-info: #2f4bd9;

    --mark-k: #000000;
    --mark-w: #d6d6cd;

    --ground-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 54.5v11M54.5 60h11' stroke='%23dcdcd3' stroke-width='1' fill='none'/%3E%3Cg fill='%23e2e2da'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='24' y='0' width='1' height='1'/%3E%3Crect x='48' y='0' width='1' height='1'/%3E%3Crect x='72' y='0' width='1' height='1'/%3E%3Crect x='96' y='0' width='1' height='1'/%3E%3Crect x='0' y='24' width='1' height='1'/%3E%3Crect x='0' y='48' width='1' height='1'/%3E%3Crect x='0' y='72' width='1' height='1'/%3E%3Crect x='0' y='96' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------------------- */
@layer base {
    body {
        font-family: var(--font-body);
        font-size: 15px;
        line-height: 1.6;
        background-color: var(--color-surface);
        color: var(--color-text);
        /* Ground: 120px plus-grid with pixel dots over three near-zero corner washes. */
        background-image:
            var(--ground-image),
            radial-gradient(1100px 700px at 100% 0%, color-mix(in srgb, var(--color-live) 7%, transparent), transparent 60%),
            radial-gradient(900px 640px at 0% 100%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 60%),
            radial-gradient(700px 520px at 100% 100%, color-mix(in srgb, var(--color-proof) 3.5%, transparent), transparent 60%);
        background-size: 120px 120px, 100% 100%, 100% 100%, 100% 100%;
        background-repeat: repeat, no-repeat, no-repeat, no-repeat;
        background-attachment: scroll, fixed, fixed, fixed;
        background-position: 48px 56px, 0 0, 0 0, 0 0;
    }

    /* Fraunces is display-only and never below 28px; smaller headings use Geist. */
    h1, h2 {
        font-family: var(--font-heading);
        font-weight: 400;
        letter-spacing: -0.01em;
        font-optical-sizing: auto;
    }

    h3, h4, h5, h6 {
        font-family: var(--font-body);
        font-weight: 600;
    }

    ::selection {
        background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    }

    :focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
}

/* ---------------------------------------------------------------------------------------
 * Components
 * ------------------------------------------------------------------------------------- */
@layer components {
    .wrap {
        max-width: 72rem;
        margin-inline: auto;
        padding-inline: 16px;
    }

    @media (min-width: 640px) {
        .wrap { padding-inline: 24px; }
    }

    /* Hairline separators between page bands. */
    .band {
        border-top: 1px solid var(--color-border);
    }

    .band--raised {
        background-color: color-mix(in srgb, var(--color-surface-alt) 88%, transparent);
    }

    /* Type roles */
    .type-display {
        font-family: var(--font-heading);
        font-weight: 400;
        font-size: clamp(40px, 6vw, 72px);
        line-height: 1.04;
        letter-spacing: -0.02em;
    }

    .type-page-title {
        font-family: var(--font-heading);
        font-weight: 400;
        font-size: clamp(32px, 4vw, 40px);
        line-height: 1.15;
    }

    .type-section {
        font-family: var(--font-heading);
        font-weight: 400;
        font-size: clamp(28px, 3vw, 36px);
        line-height: 1.2;
    }

    .type-title {
        font-family: var(--font-body);
        font-size: 17px;
        line-height: 24px;
        font-weight: 600;
    }

    .type-overline {
        font-family: var(--font-body);
        font-size: 11px;
        line-height: 16px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .type-mono {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;
    }

    .type-metric {
        font-family: var(--font-heading);
        font-weight: 400;
        font-size: 32px;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }

    /* Stamps: square boxes in the pixel voice. */
    .stamp {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        border: 1px solid var(--color-border-strong);
        border-radius: 0;
        font-family: var(--font-stamp);
        font-size: 9px;
        line-height: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-secondary);
        white-space: nowrap;
    }

    .stamp--quiet {
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }

    /* Registration corners: four 1px cyan L-shapes, 8px long, inset 4px. */
    .reg {
        position: relative;
    }

    .reg::after {
        content: "";
        position: absolute;
        inset: 4px;
        pointer-events: none;
        z-index: 2;
        --reg: var(--color-primary);
        background:
            linear-gradient(var(--reg), var(--reg)) top left / 8px 1px no-repeat,
            linear-gradient(var(--reg), var(--reg)) top left / 1px 8px no-repeat,
            linear-gradient(var(--reg), var(--reg)) top right / 8px 1px no-repeat,
            linear-gradient(var(--reg), var(--reg)) top right / 1px 8px no-repeat,
            linear-gradient(var(--reg), var(--reg)) bottom left / 8px 1px no-repeat,
            linear-gradient(var(--reg), var(--reg)) bottom left / 1px 8px no-repeat,
            linear-gradient(var(--reg), var(--reg)) bottom right / 8px 1px no-repeat,
            linear-gradient(var(--reg), var(--reg)) bottom right / 1px 8px no-repeat;
    }

    /* Corners that only appear when the element is brought into register. */
    .reg--on-hover::after {
        opacity: 0;
        transition: opacity 150ms cubic-bezier(.2, .8, .2, 1);
    }

    .reg--on-hover:hover::after,
    .reg--on-hover:focus-within::after {
        opacity: 1;
    }

    /* Cards: lighter ground + hairline, never a shadow. */
    .card {
        background-color: var(--color-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        transition: border-color 150ms, background-color 150ms;
    }

    .card:hover {
        border-color: var(--color-border-strong);
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 40px;
        padding-inline: 16px;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
        transition: background-color 150ms, border-color 150ms, color 150ms;
    }

    .btn--primary {
        background-color: var(--color-primary);
        color: var(--color-on-primary);
    }

    .btn--primary:hover {
        background-color: color-mix(in srgb, var(--color-primary) 86%, var(--color-text));
    }

    .btn--secondary {
        border-color: var(--color-border-strong);
        color: var(--color-text);
    }

    .btn--secondary:hover {
        background-color: var(--color-hover);
    }

    .btn--sm {
        height: 32px;
        padding-inline: 12px;
        font-size: 13px;
    }

    /* Signal chips: every status carries a word as well as its colour. */
    .signal-action   { --signal: var(--color-primary); }
    .signal-live     { --signal: var(--color-live); }
    .signal-proof    { --signal: var(--color-proof); }
    .signal-approved { --signal: var(--color-success); }
    .signal-rejected { --signal: var(--color-danger); }
    .signal-archived { --signal: var(--color-info); }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 20px;
        padding-inline: 6px;
        border-radius: var(--radius-xs);
        border: 1px solid color-mix(in srgb, var(--signal, var(--color-border-strong)) 40%, transparent);
        background-color: color-mix(in srgb, var(--signal, var(--color-border-strong)) 12%, transparent);
        color: var(--signal, var(--color-text-muted));
        font-size: 11px;
        font-weight: 600;
        line-height: 16px;
        white-space: nowrap;
    }

    .chip::before {
        content: "";
        width: 6px;
        height: 6px;
        background-color: currentColor;
    }

    .chip.signal-live::before {
        border-radius: 999px;
    }

    /* Creative frame: native aspect on stone-000 with a hairline. */
    .frame {
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    .frame__art {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Rich text inside text blocks. */
    .prose-record > * + * { margin-top: 16px; }
    .prose-record h2 { font-size: 28px; line-height: 1.2; margin-top: 40px; color: var(--color-text); }
    .prose-record h3 { font-size: 17px; line-height: 24px; margin-top: 32px; color: var(--color-text); }
    .prose-record p, .prose-record li { color: color-mix(in srgb, var(--color-text) 82%, transparent); }
    .prose-record ul { list-style: square; padding-left: 20px; }
    .prose-record ol { list-style: decimal; padding-left: 20px; }
    .prose-record li + li { margin-top: 4px; }
    .prose-record a { color: var(--color-primary); text-underline-offset: 3px; }
    .prose-record a:hover { text-decoration: underline; }
    .prose-record blockquote {
        border-left: 1px solid var(--color-primary);
        padding-left: 16px;
        font-family: var(--font-heading);
        font-size: 28px;
        line-height: 1.25;
        color: var(--color-text);
    }
    .prose-record code { font-family: var(--font-mono); font-size: 13px; }

    /* Logo: swap the wordmark ink for the active theme. */
    .logo-on-light { display: none; }
    html[data-theme="light"] .logo-on-dark { display: none; }
    html[data-theme="light"] .logo-on-light { display: block; }

    /* Header lockup: wordmark + bars from 720px; the mark alone below. */
    .lockup__word { display: none; }

    @media (min-width: 720px) {
        .lockup__word { display: flex; }
        .lockup__mark-only { display: none; }
    }

    .mark-k { fill: var(--mark-k); }
    .mark-w { fill: var(--mark-w); }
}