/* ==========================================================================
   TOKENS — "Ink on Bone"
   Design system for georgiosp.github.io. Rebrands happen here and only here.
   ========================================================================== */

@layer tokens, base, layout, components, motion, utilities;

@layer tokens {

    /* ------------------------------------------------------------------
       Palette

       One accent, used with discipline. Two accents is what makes a page
       read as undesigned.

       CONTRAST — do not break these:
         #FF4A1C on bone (#F6F2EA) = 3.01:1
           OK for >=24px text, rules, icons, focus rings.
           NOT OK for body copy -> use --accent-text (#C9350F, 4.70:1).
         #FF4A1C on ink (#141210) = 5.56:1 -> safe at any size.
       ------------------------------------------------------------------ */

    :root {
        /* Raw ramp */
        --c-bone: #f6f2ea;
        --c-bone-sunk: #ebe6da;
        --c-bone-rule: #d9d2c4;

        --c-ink: #141210;
        --c-ink-lift: #1e1b18;
        --c-ink-rule: #322d28;

        --c-graphite: #6c655b;
        /* muted on bone — 5.15:1 */
        --c-ash: #9a9287;
        /* muted on ink  — 6.08:1 */

        --c-signal: #ff4a1c;
        --c-signal-deep: #c9350f;
        /* small-text-safe on bone */

        /* Semantic — bone panel is the default */
        --surface: var(--c-bone);
        --surface-sunk: var(--c-bone-sunk);
        --rule: var(--c-bone-rule);
        --text: var(--c-ink);
        --text-muted: var(--c-graphite);
        --accent: var(--c-signal);
        --accent-text: var(--c-signal-deep);
        /* Text ON the signal fill. Ink is 5.56:1; bone would be 3.01:1. */
        --on-accent: var(--c-ink);
        --shadow-rgb: 20 18 16;
    }

    [data-panel="ink"] {
        --surface: var(--c-ink);
        --surface-sunk: var(--c-ink-lift);
        --rule: var(--c-ink-rule);
        --text: var(--c-bone);
        --text-muted: var(--c-ash);
        --accent: var(--c-signal);
        --accent-text: var(--c-signal);
        --on-accent: var(--c-ink);
        --shadow-rgb: 0 0 0;
        --e-print: 6px 6px 0 0 var(--accent);
        color-scheme: dark;
    }

    /* ------------------------------------------------------------------
       Type
       ------------------------------------------------------------------ */

    :root {
        --font-display: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
        --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

        /* Fluid modular scale — 320->1440px, 16->19px base, ratio 1.2->1.26 */
        --step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem);
        --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
        --step-0: clamp(1.00rem, 0.93rem + 0.33vw, 1.19rem);
        --step-1: clamp(1.20rem, 1.09rem + 0.53vw, 1.50rem);
        --step-2: clamp(1.44rem, 1.28rem + 0.80vw, 1.90rem);
        --step-3: clamp(1.73rem, 1.49rem + 1.18vw, 2.40rem);
        --step-4: clamp(2.07rem, 1.73rem + 1.71vw, 3.03rem);
        --step-5: clamp(2.49rem, 2.00rem + 2.44vw, 3.83rem);
        --step-6: clamp(2.99rem, 2.31rem + 3.40vw, 4.84rem);
        --step-7: clamp(3.58rem, 2.64rem + 4.70vw, 6.12rem);
        --step-8: clamp(4.30rem, 2.99rem + 6.53vw, 7.73rem);

        --lh-tight: 0.94;
        --lh-head: 1.06;
        --lh-body: 1.58;
        --tr-display: -0.03em;
        --tr-mono: 0.08em;
        --measure: 62ch;
        --measure-tight: 46ch;
    }

    /* ------------------------------------------------------------------
       Space, radii, elevation, motion
       ------------------------------------------------------------------ */

    :root {
        --s-1: 4px;
        --s-2: 8px;
        --s-3: 12px;
        --s-4: 16px;
        --s-5: 24px;
        --s-6: 32px;
        --s-7: 48px;
        --s-8: 64px;
        --s-9: 96px;
        --s-10: 128px;
        --s-11: 192px;

        --gutter: clamp(20px, 5vw, 64px);
        --section-y: clamp(88px, 12vw, 176px);
        --rail: clamp(28px, 7vw, 96px);
        --nav-h: 64px;

        /* Sharp. This is a drafting sheet, not a SaaS dashboard.
           --r-round is for trace nodes only: the only curves on the page. */
        --r-0: 0;
        --r-1: 2px;
        --r-2: 4px;
        --r-round: 50%;

        /* Ink weight and hard offsets, never blurry glows */
        --e-1: 0 1px 0 var(--rule);
        --e-2: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 2px 8px rgb(var(--shadow-rgb) / .04);
        --e-3: 0 2px 4px rgb(var(--shadow-rgb) / .07), 0 12px 28px rgb(var(--shadow-rgb) / .08);
        --e-print: 6px 6px 0 0 var(--text);

        --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

        --d-1: 140ms;
        --d-2: 240ms;
        --d-3: 420ms;
        --d-4: 700ms;
        --d-5: 1100ms;

        --focus-w: 2px;
        --focus-offset: 3px;
    }

    /* Registered so per-frame writes don't re-parse and values interpolate */
    @property --p {
        syntax: "<number>";
        inherits: true;
        initial-value: 0;
    }

    @property --shift {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
    }

    @property --mx {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
    }

    @property --my {
        syntax: "<length>";
        inherits: false;
        initial-value: 0px;
    }
}


@layer base {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--nav-h) + var(--s-5));
        -webkit-text-size-adjust: 100%;
    }

    body {
        margin: 0;
        background: var(--c-bone);
        color: var(--text);
        font-family: var(--font-body);
        font-size: var(--step-0);
        line-height: var(--lh-body);
        font-synthesis-weight: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
    }

    h1,
    h2,
    h3,
    h4 {
        margin: 0;
        font-family: var(--font-display);
        font-weight: 400;
        line-height: var(--lh-head);
        letter-spacing: var(--tr-display);
        text-wrap: balance;
    }

    p {
        margin: 0;
        text-wrap: pretty;
    }

    ul,
    ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    img,
    svg {
        display: block;
        max-width: 100%;
    }

    button {
        font: inherit;
        color: inherit;
    }

    ::selection {
        background: var(--c-signal);
        color: var(--c-bone);
    }

    :focus-visible {
        outline: var(--focus-w) solid var(--accent);
        outline-offset: var(--focus-offset);
    }

    /* The annotation layer. Mono is always tracked out and uppercase. */
    .mono {
        font-family: var(--font-mono);
        font-size: var(--step--2);
        font-weight: 500;
        letter-spacing: var(--tr-mono);
        text-transform: uppercase;
        line-height: 1.4;
    }

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

    .skip-link {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        padding: var(--s-3) var(--s-5);
        background: var(--c-signal);
        color: var(--c-ink);
        font-family: var(--font-mono);
        font-size: var(--step--2);
        letter-spacing: var(--tr-mono);
        text-transform: uppercase;
        transform: translateY(-110%);
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }
}


@layer layout {

    /* ------------------------------------------------------------------
       The breakout grid. Every section uses it.
       `rail` is the spine the trace runs down; content is anchored
       against it rather than centred in the viewport.
       ------------------------------------------------------------------ */

    .layout {
        /* Both gutters AND the rail live outside the content column, so all
           three have to come off the available width or the grid overflows. */
        --content: min(100% - (var(--gutter) * 2) - var(--rail), 68rem);
        display: grid;
        grid-template-columns:
            [full-start] minmax(var(--gutter), 1fr)
            [rail-start] var(--rail) [rail-end wide-start margin-start] minmax(0, 6rem)
            [margin-end content-start] var(--content) [content-end]
            minmax(0, 6rem) [wide-end]
            minmax(var(--gutter), 1fr) [full-end];
    }

    .layout>* {
        grid-column: content;
        min-width: 0;
    }

    .layout>.u-full {
        grid-column: full;
    }

    .layout>.u-wide {
        grid-column: wide;
    }

    /* The narrow slot left of the content column — marginalia only. It has
       zero width until the viewport exceeds the content cap, so anything
       placed here must be hidden below ~1400px. */
    .layout>.u-margin {
        grid-column: margin;
    }

    .layout>.u-rail {
        grid-column: rail;
    }

    .layout>.u-bleed-r {
        grid-column: content-start / full-end;
    }

    .layout>.u-bleed-l {
        grid-column: full-start / content-end;
    }
}