/* base.css — design tokens, reset, typography, utilities.
   TSMG design system: ink-navy dark theme built from the brand logo navy,
   amber signal accent, Space Grotesk display type over Inter body.
   Loaded first on every page. */

:root {
    /* ---- ink scale (page depth) ---- */
    --ink-950: #060D1F;          /* page background            */
    --ink-900: #081226;          /* deep sections              */
    --ink-850: #0A1733;          /* raised surface             */
    --ink-800: #0D1B3C;          /* cards                      */
    --ink-700: #14244A;          /* elevated / hover           */
    --ink-600: #23365E;          /* active surface             */
    --brand-navy: #0A1733;
    --paper: #F4F6FB;         /* light editorial sections   */
    --paper-card: #FFFFFF;
    --paper-line: #D4DAE6;
    --paper-text: #0A1733;
    --paper-mid: #4A5A7A;
    --paper-low: #5A6B8F;
    --serif-accent: #35548F;  /* italic serif em on light   */       /* logo navy (light contexts) */

    /* ---- lines ---- */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.18);

    /* ---- text ---- */
    --text-hi: #F4F6FB;
    --text-mid: #B6C2DB;
    --text-low: #8FA2C4;
    --text-faint: #5A6B8F;

    /* ---- accent: amber signal ---- */
    --gold: #9FBBEA;          /* ice-blue signal (legacy token name kept as bridge) */
    --gold-bright: #C3D6F5;
    --gold-deep: #6F8FC9;
    --gold-glow: rgba(159, 187, 234, 0.16);
    --gold-ink: #060D1F;         /* text on amber */

    /* ---- states ---- */
    --ok: #3ECF8E;
    --ok-dim: rgba(62, 207, 142, 0.14);
    --danger: #F26D6D;
    --danger-dim: rgba(242, 109, 109, 0.12);

    /* ---- type ---- */
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;

    /* ---- geometry ---- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --header-h: 72px;
    --container: 1240px;

    /* ---- motion ---- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 160ms var(--ease);
    --t-med: 300ms var(--ease);

    /* ---- legacy token bridge (older page css still reads these) ---- */
    --primary-color: var(--ink-900);
    --secondary-color: var(--ink-700);
    --accent-color: var(--gold);
    --text-light: var(--text-hi);
    --text-dark: var(--text-hi);
    --spacing-unit: 1rem;
    --error-color: var(--danger);
    --success-color: var(--ok);

    /* =====================================================================
       The steps between the steps

       Everything above names a colour. What the site actually paints with,
       over and over, is a colour at some alpha — and those had no names, so
       they were written out by hand and drifted. A survey of the stylesheets
       found white at thirteen different alphas, the accent at six, danger at
       five, and the same value spelled two ways depending on which file it
       was in. "Muted" had six answers.

       So this is the missing middle: one step per job, named for the job.
       Every value below already appears somewhere in the site's own CSS —
       nothing here is invented, it is the existing vocabulary written down.

       Additive only. Nothing above is redefined, so no existing page moves.
       ===================================================================== */

    /* ---- lines: white over ink, by what the line separates ---- */
    /* --line (0.08) and --line-strong (0.18) are declared above and belong
       to this set; they are named there because older CSS already reads them. */
    --line-edge:   rgba(255, 255, 255, 0.12);   /* a surface's own edge — the site's card */
    --line-field:  rgba(255, 255, 255, 0.16);   /* a form control's edge */
    --line-action: rgba(255, 255, 255, 0.25);   /* a button's edge */

    /* ---- washes: white over ink, by how raised the surface is ---- */
    --wash-1: rgba(255, 255, 255, 0.02);   /* a row under the cursor */
    --wash-2: rgba(255, 255, 255, 0.04);   /* a card, a field — the site's surface */
    --wash-3: rgba(255, 255, 255, 0.06);   /* a neutral chip, a raised cell */
    --wash-4: rgba(255, 255, 255, 0.10);   /* pressed, and the trough of a progress bar */

    /* ---- state tints: a fill, an edge, and text that survives on the fill ----
       Three steps per state, so a callout, a badge and a border are the same
       decision made once. --gold-glow, --ok-dim and --danger-dim are the fills
       and are declared above. */
    --gold-wash:   rgba(159, 187, 234, 0.10);   /* the accent as a ground, not a mark */
    --gold-edge:   rgba(159, 187, 234, 0.40);
    --ok-edge:     rgba(62, 207, 142, 0.40);
    --ok-text:     #C6EBDA;
    --danger-edge: rgba(242, 109, 109, 0.40);
    --danger-text: #F7C9C9;

    /* Amber has no place in the palette — the accent moved to ice-blue and the
       token kept the old name. But a draft is not a warning and not an error,
       and it needs to read as neither, so it keeps the one warm hue on the
       site. Named for what it marks rather than for its colour, so it cannot
       drift into meaning "caution". */
    --draft:      #E0B778;
    --draft-dim:  rgba(224, 183, 120, 0.15);
    --draft-edge: rgba(224, 183, 120, 0.40);

    /* ---- text: the step that was missing ----
       #C6D0E4 is the most-used unnamed colour on the site — nav links, chips,
       tabs, every piece of interactive text at rest. It sits between --text-hi
       and --text-mid and had been hand-written a dozen times. */
    --text-soft: #C6D0E4;

    /* ---- spacing: 4px, and nothing between the steps ----
       The panel used 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 32, 34, 40, 44 and
       48 — which is not a scale, it is fifteen separate decisions. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;

    /* ---- geometry and type the tokens were missing ---- */
    --r-full: 999px;                 /* written out at nine sites */
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;   /* at four */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Guard: nothing on the site is meant to scroll the document sideways.
       `clip` rather than `hidden` so this cannot turn the root into a scroll
       container and break position: sticky further down the page. */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-mid);
    background-color: var(--ink-950);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--text-hi);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 500;
}

p { color: var(--text-mid); }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast);
}

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

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

::selection {
    background: var(--gold);
    color: var(--gold-ink);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* thin, dark scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 8px; border: 2px solid var(--ink-950); }
*::-webkit-scrollbar-track { background: transparent; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* ---- shared section header ---- */
.section-title {
    max-width: 640px;
    margin-bottom: 3rem;
}
.section-title h1,
.section-title h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    margin-bottom: 0.75rem;
}
.section-title p {
    color: var(--text-mid);
    font-size: 1.05rem;
}
/* amber tick before section headings — brand signal */
.section-title h2::before,
.section-title h1::before {
    content: '';
    display: block;
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: var(--gold);
    margin-bottom: 1.1rem;
}
.section-title.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.section-title.center h1::before,
.section-title.center h2::before { margin-left: auto; margin-right: auto; }

/* ---- monogram (CSS recreation of the boxed TSMG logo — always crisp) ---- */
.tsmg-mark {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 5px;
    border: 2px solid currentColor;
    border-radius: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1;
    letter-spacing: 0;
    user-select: none;
    flex-shrink: 0;
}
.tsmg-mark span { display: block; }

/* serif italic emphasis — the design's signature move */
h1 em, h2 em, h3 em, .serif-em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}
.on-paper h1 em, .on-paper h2 em, .on-paper h3 em { color: var(--serif-accent); }

/* uppercase letterspaced kicker — used across sections */
.kicker {
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-low);
}
.on-paper .kicker { color: var(--paper-low); }

/* light editorial section wrapper */
.on-paper {
    background: var(--paper);
    color: var(--paper-text);
}
.on-paper h1, .on-paper h2, .on-paper h3, .on-paper h4 { color: var(--paper-text); }
.on-paper p { color: var(--paper-mid); }

/* ---- utility ---- */
.text-gold { color: var(--gold); }
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

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