/* ENTRYPOINT — design tokens
   Single source of truth for fonts, colours, theme and radii.
   Load this file BEFORE any other CSS. */

/* ── WEBFONTS ─────────────────────────────────────────────── */

@font-face {
  font-family: 'NeueMachina';
  src: url('/fonts/NeueMachina-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueMachina';
  src: url('/fonts/NeueMachina-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueMachina';
  src: url('/fonts/NeueMachina-Ultrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'POICarbonic';
  src: url('/fonts/POICarbonic-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ── BASE PALETTE ─────────────────────────────────────────── */
/* Only what the site actually uses. */

:root {
  /* Accent — amber. */
  --accent:       #F2A541;
  --accent-ink:   #0D0D0D;              /* text on top of the accent */
  --accent-soft:  rgba(242,165,65,0.1); /* accent-tinted background */

  /* Fonts */
  --font-display: 'NeueMachina', 'Arial Black', sans-serif;
  --font-body:    'POICarbonic', 'Helvetica Neue', Arial, sans-serif;

  /* Radii — technical, nearly square */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* The <select> chevron. It lives here and not in components.css for one
     reason: a data URI cannot read a CSS variable, so its stroke has to be a
     literal — and the one place a literal colour is allowed to exist is this
     file. The %238A8880 below IS --t-fg-2, written the only way an SVG in a URL
     can be written. Change that token and change this with it; nothing will
     tell you otherwise. Drawn rather than typed: an arrow glyph would be a
     character standing in for an icon, at the mercy of the fallback font. */
  --chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A8880' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* ── THEME ────────────────────────────────────────────────── */
/* The site is dark, and only dark. These tokens ARE the theme, not "the dark
   theme": there is no theme selector to override them. */
:root {
  color-scheme: dark;   /* makes the browser draw select, scrollbar and autofill
                           dark — without it the form leaks light system chrome */

  --t-bg:       #0D0D0D;
  --t-bg-2:     #161616;
  --t-fg:       #F0EEE8;
  --t-fg-2:     #8A8880;   /* 5.47:1 on --t-bg */
  /* The third step is where the ramp used to fall off a cliff: at #555550 it
     measured 2.59:1 on --t-bg. It is not a decoration token — five of its six
     consumers carry text, and they are not minor ones: the footer nav (the only
     navigation a phone gets), the three steps on /apply, the copyright line and
     every input placeholder. So it meets 4.5:1 on BOTH surfaces it lands on:
     --t-bg for the page, and --t-bg-2 because that is the fill of .form-input,
     where the placeholder sits. That second constraint is what sets the value —
     4.5:1 on #161616 needs more light than 4.5:1 on #0D0D0D does.
     The honest cost: the step down from --t-fg-2 is now a narrow one. Three
     greys that all have to be readable on a near-black page do not have much
     room between them, and the big step in this ramp was always --t-fg to
     --t-fg-2. Widening it again means raising --t-fg-2 — a change to body copy
     across the whole site, and a design call, not an accessibility fix. */
  --t-fg-3:     #828078;   /* 4.91:1 on --t-bg, 4.57:1 on --t-bg-2 */
  --t-border:   #282828;
  --t-border-2: #333330;
  --t-nav-bg:   rgba(13,13,13,0.92);
  --t-accent:   var(--accent);

  /* Syntax colours for the code snippets in the thesis — the hues an editor
     would give them, picked against --t-bg-2, which is what a snippet sits on.
     Only four: keyword, name, literal and string. Parameter names stay plain,
     as an editor leaves them, and the amber stays out of it — that is the CTA
     colour, and a decorative block must not compete with the buttons. */
  --t-code-kw:  #C792EA;   /* class, def, return */
  --t-code-fn:  #82AAFF;   /* the name being defined */
  --t-code-lit: #F78C6C;   /* true, False, High, 0 */
  --t-code-str: #A8E063;   /* strings — the green the terminal already uses */

  /* Form states: the error text and border, and the "received" line. */
  --t-error:    #D9534F;
  --t-success:  #3C8D4E;
}

/* ── TERMINAL ─────────────────────────────────────────────── */
/* Both terminals — the entry CLI and the hero window — quote macOS Terminal, so
   they keep its palette and not the site's: a light window chrome on a warm
   desk, and a slate body with the usual output colours. Same value in two
   roles (the yellow light and a warning line, say) is still two tokens: they
   change for different reasons. */
:root {
  --term-desk:          #C9C5BB;   /* behind the entry CLI's window */
  --term-desk-hi:       #D4D0C5;
  --term-desk-lo:       #B8B3A8;
  --term-chrome-top:    #E0DDD5;   /* title bar gradient */
  --term-chrome-bottom: #CFCAC0;
  --term-chrome-edge:   #A8A49A;
  --term-chrome-fg:     #3A3A3A;   /* the window title */
  --term-folder:        #7DBAEC;   /* the folder icon beside the title */
  --term-light-close:   #FF5F57;
  --term-light-min:     #FEBC2E;
  --term-light-max:     #28C840;

  --term-bg:            #2D3440;
  --term-fg:            #E8E6DF;
  --term-fg-bright:     #F0EEE8;   /* the ASCII mark */
  /* Dimmed, not unreadable: the #888680 it replaced measured 3.44:1 on
     --term-bg; this one measures 4.67:1. */
  --term-dim:           #A09E97;
  --term-ok:            #A8E063;
  --term-warn:          #FEBC2E;
  --term-err:           #FF7A7A;
  --term-accent:        #7DBAEC;   /* commands echoed, highlighted output */
  --term-link:          #A8E063;   /* a command you can click */
  --term-placeholder:   #555A63;
}