/**
 * FILE: assets/css/variables.css
 * PURPOSE: Every design token the site uses — colour, type scale, spacing,
 *          radii, shadows, timings, layout widths and breakpoint values.
 *          Nothing in this file selects an element. Change a value here and it
 *          changes everywhere.
 *
 *          Loaded first. See documentation/HUMAN-EDITING-GUIDE.md.
 */

:root {

    /* ======================================================================
     * COLOUR
     * The site is dark by design: near-black grounds, warm brass accent,
     * off-white text. Names describe the colour, not where it is used.
     * ==================================================================== */

    /* Grounds, lightest to darkest */
    --color-cream:        #101418;  /* raised panels, cards */
    --color-cream-dark:   #161b21;  /* hovered panels, inputs */
    --color-coal:         #0a0d10;  /* the page */
    --color-coal-deep:    #07090b;  /* footer, wells, scrims */

    /* Accent */
    --color-flame:        #d5a44b;  /* brass — the only accent */
    --color-flame-bright: #e4b962;
    --color-flame-dim:    #a87f33;

    /* Text */
    --color-ink:          #e9ece6;  /* headings, body on dark */
    --color-ink-soft:     #969e97;  /* secondary copy, captions */
    --color-ink-faint:    #6b7470;  /* meta, disabled */

    /* Lines */
    --color-line:         #1d2429;
    --color-line-strong:  #39413a;

    /* States */
    --color-error:        #e2705f;
    --color-error-bg:     #2a1613;
    --color-success:      #7fb584;

    /* Semantic aliases — prefer these in component rules */
    --bg-page:            var(--color-coal);
    --bg-raised:          var(--color-cream);
    --bg-raised-hover:    var(--color-cream-dark);
    --bg-well:            var(--color-coal-deep);
    --text-base:          var(--color-ink);
    --text-muted:         var(--color-ink-soft);
    --text-faint:         var(--color-ink-faint);
    --accent:             var(--color-flame);
    --border:             var(--color-line);
    --border-strong:      var(--color-line-strong);

    /* ======================================================================
     * TYPE
     * One family, loaded in head.php. The stack behind it is what the
     * visitor sees for the few milliseconds before the font arrives.
     * ==================================================================== */
    --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid scale. Each step grows with the viewport between 20rem and 90rem,
     * so there are no jumps at the breakpoints. */
    --step--2: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
    --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
    --step-0:  clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.07rem + 0.27vw, 1.3125rem);
    --step-2:  clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
    --step-3:  clamp(1.625rem, 1.41rem + 1.07vw, 2.375rem);
    --step-4:  clamp(1.9375rem, 1.52rem + 2.07vw, 3.375rem);
    --step-5:  clamp(2.25rem, 1.5rem + 3.75vw, 4.75rem);
    --step-6:  clamp(2.625rem, 1.3rem + 6.6vw, 7rem);

    --leading-tight:   1.08;
    --leading-snug:    1.25;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.08em;
    --tracking-wider:  0.18em;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* ======================================================================
     * SPACE
     * A fluid scale. Section padding and gaps come from here so vertical
     * rhythm stays proportional on a phone and on a 27-inch monitor.
     * ==================================================================== */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.48rem + 0.09vw, 0.5625rem);
    --space-xs:  clamp(0.75rem, 0.72rem + 0.14vw, 0.875rem);
    --space-s:   clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --space-m:   clamp(1.5rem, 1.45rem + 0.27vw, 1.6875rem);
    --space-l:   clamp(2rem, 1.91rem + 0.36vw, 2.25rem);
    --space-xl:  clamp(3rem, 2.82rem + 0.73vw, 3.5rem);
    --space-2xl: clamp(4rem, 3.45rem + 2.18vw, 5.5rem);
    --space-3xl: clamp(5rem, 3.91rem + 4.36vw, 8rem);
    --space-4xl: clamp(6rem, 3.82rem + 8.73vw, 12rem);

    /* Standard section rhythm */
    --section-y:       var(--space-3xl);
    --section-y-tight: var(--space-2xl);

    /* ======================================================================
     * LAYOUT
     * ==================================================================== */
    --wrap-max:        78rem;   /* 1248px — the normal content width */
    --wrap-narrow-max: 46rem;   /* 736px  — prose and legal pages */
    --wrap-wide-max:   92rem;   /* 1472px — full-bleed inner content */
    --gutter:          clamp(1.25rem, 0.9rem + 1.4vw, 2.5rem);
    --measure:         68ch;    /* longest comfortable line of prose */

    --masthead-h:      clamp(4.25rem, 4rem + 1.1vw, 5.5rem);

    /* ======================================================================
     * BORDERS, RADII, SHADOWS
     * The design is square by intention. Radii are nearly zero on purpose.
     * ==================================================================== */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-pill: 999px;

    --border-w: 1px;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 24px 60px -16px rgb(0 0 0 / 0.7);
    --shadow-flame: 0 10px 30px -12px rgb(213 164 75 / 0.45);

    /* ======================================================================
     * MOTION
     * Every duration here is ignored when the visitor asks for reduced
     * motion — see base.css.
     * ==================================================================== */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:  140ms;
    --dur-base:  240ms;
    --dur-slow:  480ms;
    --dur-hero:  1100ms;   /* hero crossfade */
    --dur-marquee: 28s;    /* one full marquee pass */

    /* ======================================================================
     * DEPTH
     * ==================================================================== */
    --z-base:      1;
    --z-raised:    10;
    --z-masthead:  100;
    --z-menu:      200;
    --z-skip:      300;

    /* ======================================================================
     * IMAGES
     * ==================================================================== */
    --ratio-wide:    16 / 9;
    --ratio-photo:    4 / 3;
    --ratio-square:   1 / 1;
    --ratio-portrait: 3 / 4;
    --ratio-hero:     3 / 2;
    --img-filter: saturate(1.02) contrast(1.02);
}

/* The light-on-dark scheme is the design, not a preference, so the browser is
 * told once and form controls, scrollbars and selections follow. */
:root { color-scheme: dark; }