/* tokens.css - Emir (M1)
   Group file: check with everyone before changing this one.

   Every colour, font and spacing value on the site lives here.
   This loads first and the other stylesheets only use var() from
   below. Need a new value? Add a token. Don't hardcode a hex in
   a component.

   Palette is what the group ratified on 27 Jul. The five main
   values per theme are fixed. The derived ones underneath are
   mine, added to get everything through WCAG AA.

   Light theme = the light table, dark theme = the darkroom. */

/* Self-hosted Helvetica Neue Medium (in ../assets/, relative to this
   file), the display and mono face for the whole site. Family name
   and weight match the @font-face in portfolio/mohammed/style.css so
   the site shares one face. format() must be 'truetype', not 'ttf';
   browsers skip a src whose format hint they don't recognise. */
@font-face {
    font-family: 'Helvetica Neue Medium';
    src: url('../assets/HelveticaNeue Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Light table (default) */
:root {
    /* ratified palette */
    --bg: #f4eee1;            /* warm paper white */
    --surface: #fbf7ec;       /* card white */
    --text: #26201a;          /* warm ink */
    --muted: #6f6556;         /* warm grey */
    --accent: #b45309;        /* film-box amber */

    /* derived values (not ratified, worked out from the palette):

       the ratified amber hits 4.34:1 on --bg. That's fine for big
       text, borders, focus rings and fills (WCAG only asks 3:1
       there) but normal-size text needs 4.5:1 and it misses by a
       hair. So small accent text (links, eyebrows, prices) uses
       --accent-text, the same hue darkened until it passes. */
    --accent-hover: #7c3f06;  /* amber darkened for hover */
    --accent-text: #7c3f06;   /* amber for small text, 7.07:1 on --bg */
    --hairline: #ddd2bb;      /* sepia rule lines */
    --track: #e8dfca;         /* unfilled track (meters, progress) */

    /* filled button colours, checked: --btn-text on --btn-bg = 7.63:1 */
    --btn-bg: #7c3f06;
    --btn-bg-hover: #5f3105;  /* darker, so contrast only goes up */
    --btn-text: #fbf7ec;

    /* display and mono use the self-hosted Helvetica Neue Medium
       (see @font-face above), body text stays on system fonts. The
       system stacks after it are fallbacks for slow loads / older
       browsers that can't fetch the file. */
    --font-display: 'Helvetica Neue Medium', Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Helvetica Neue Medium', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    /* spacing scale from the master plan, kept in variables
       like the colours. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;          /* between sections */

    --radius: 10px;
    --radius-pill: 999px;
    --wrap: 1050px;
    --transition: 160ms ease;
}

/* Darkroom */
[data-theme="dark"] {
    /* ratified palette */
    --bg: #0e0e11;            /* neutral near-black */
    --surface: #241014;       /* deep maroon panel */
    --text: #f2e7d5;          /* warm off-white */
    --muted: #b09a85;         /* pale umber */
    --accent: #e5484d;        /* safelight red */

    /* safelight red already passes for small text on near-black
       (4.92:1) so --accent-text is just --accent here. Hover goes
       lighter instead of darker. */
    --accent-hover: #f0686c;
    --accent-text: #e5484d;
    --hairline: #452227;
    --track: #2e2e35;

    /* checked: --btn-text on --btn-bg = 4.92:1 */
    --btn-bg: #e5484d;
    --btn-bg-hover: #f0686c;
    --btn-text: #0e0e11;
}

/* Contrast I ran (27 Jul, AA bar is 4.5:1 for normal text):

   light: text 13.93 on bg · muted 4.95 · accent-text 7.07 · button 7.63
   dark:  text 15.76 on bg · muted 7.17 · accent 4.92 · button 4.92

   Both themes pass on their own. Raw --accent in the light theme is
   4.34 on --bg, so keep it away from small text (see note above).
   If you add a new colour pair, check BOTH themes before merging. */