/* ==========================================================================
   TOKENS.CSS - the single source of truth for every visual value on the site
   ==========================================================================
   How to use:
   - Link it first on every page:  <link rel="stylesheet" href="/brand/tokens.css">
   - In your own CSS, only use the SEMANTIC tokens (section 3), never the raw
     primitives (section 2) and never hard-coded values like #FF8D00 or 16px.
     Example:  color: var(--color-text);   NOT   color: #FFD9AA;
   - Want to change a color everywhere? Change it here, once.

   Sections:
   1. Fonts (@font-face)
   2. Primitives  - raw values, named by WHAT they are   (--orange-500)
   3. Semantic    - named by the JOB they do             (--color-accent)
   4. Light theme - only overrides the semantic colors
   5. User preferences (reduced motion / reduced transparency)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS
   Self-hosted: the font files live on our own site, so visitors' IP addresses
   are not sent to a third-party font server (GDPR), and it works offline/locally.
   font-display: swap = show text in a fallback font immediately, swap when loaded.
   -------------------------------------------------------------------------- */

/* Clash Display - display font (headings).
   Indian Type Foundry, ITF Free Font License 2.0, https://www.fontshare.com/fonts/clash-display
   Variable font: one file covers every weight from 200 to 700.
   NOTE: not in git yet, see brand/fonts/README.md. Without it, headings use the fallback. */
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/ClashDisplay-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Manrope - body font (text, buttons, labels).
   The Manrope Project Authors, SIL Open Font License 1.1, https://github.com/sharanda/manrope
   Two files: the browser only downloads the second one if a page uses those characters. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  /* basic Latin: English, Dutch, French (incl. é è ç ë ï œ €) */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  /* extended Latin: rarer accented letters (Polish, Czech, Turkish names...) */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  /* ------------------------------------------------------------------------
     2. PRIMITIVES - the raw ingredients. Don't use these directly in pages.
     ------------------------------------------------------------------------ */

  /* Carbon Black family (brand color #1E1E1E = carbon-800) */
  --carbon-950: #121212;
  --carbon-900: #161616;   /* page background (dark) - a touch deeper than the brand black */
  --carbon-800: #1E1E1E;   /* BRAND: Carbon Black */
  --carbon-700: #262422;   /* solid glass fallback */
  --carbon-600: #2E2C2A;
  --carbon-400: #A39887;   /* UI borders on dark: 3.3:1 even on glass over dense waves */

  /* Apricot Cream family (brand color #FFD9AA = cream-300) */
  --cream-50:  #FFFBF5;
  --cream-100: #FBF3E8;    /* page background (light theme) */
  --cream-300: #FFD9AA;    /* BRAND: Apricot Cream */
  --cream-500: #D4C2A8;    /* muted text on dark */
  --cream-800: #5C4F43;    /* muted text on light */

  /* Dark Orange family (brand color #FF8D00 = orange-500) */
  --orange-200: #FFBE6B;   /* small orange text on dark glass */
  --orange-300: #FFB04D;   /* top of button gradients */
  --orange-500: #FF8D00;   /* BRAND: Dark Orange */
  --orange-600: #FF6F14;   /* bottom of button gradients */
  --orange-800: #9A4300;   /* orange text on light backgrounds */

  /* Ember - depth color. Waves, glows, gradients. NEVER text (fails contrast on glass). */
  --ember-500: #FF5A1F;

  /* Font stacks: our font first, then look-alikes the visitor's computer probably has */
  --font-stack-display: 'Clash Display', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif;
  --font-stack-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;


  /* ------------------------------------------------------------------------
     3. SEMANTIC TOKENS - what pages use. Named by job, not by color.
     Default = dark theme (the brand is dark-first).
     ------------------------------------------------------------------------ */

  /* --- Color: surfaces --- */
  --color-bg: var(--carbon-900);                    /* page background */
  --color-bg-glow-1: rgba(255, 141, 0, .16);        /* orange light pool, top right */
  --color-bg-glow-2: rgba(255, 90, 31, .14);        /* ember light pool, bottom left */
  --color-surface: rgba(38, 36, 34, .62);           /* glass panels and cards (62% opaque) */
  --color-surface-solid: var(--carbon-700);         /* glass when transparency is turned off */
  --color-surface-hover: rgba(255, 217, 170, .05);  /* subtle highlight behind hovered rows */

  /* --- Color: text --- */
  --color-text: var(--cream-300);                   /* all main text: 7.0:1 worst case on glass */
  --color-text-muted: var(--cream-500);             /* dates, meta, captions: 5.35:1 worst case */
  --color-text-accent: var(--orange-200);           /* small orange text: links, tags, labels (4.74:1 worst) */
  --color-heading-accent: var(--orange-500);        /* ONE highlighted word in a big heading only (large text) */

  /* --- Color: accent (buttons, active states) --- */
  --color-accent: var(--orange-500);                /* solid orange fills */
  --color-accent-gradient: linear-gradient(180deg, var(--orange-300) 0%, var(--orange-500) 55%, var(--orange-600) 100%);
  --color-on-accent: var(--carbon-800);             /* text ON orange: 6.0-9.2:1. Never white (2.3:1 fails) */
  --color-tag-bg: rgba(255, 141, 0, .12);
  --color-tag-border: rgba(255, 141, 0, .35);
  --color-border-accent: rgba(255, 141, 0, .5);     /* hovered card edge */

  /* --- Color: lines and outlines --- */
  --color-border: rgba(255, 217, 170, .16);         /* glass edges, dividers (decorative) */
  --color-border-rim: rgba(255, 217, 170, .30);     /* brighter top edge of glass: light catching it */
  --color-border-ui: var(--carbon-400);             /* borders that must be seen (inputs, checkboxes): 3.3:1+ */
  --color-focus: var(--cream-300);                  /* keyboard focus ring */
  --color-logo: var(--orange-500);                   /* monogram color (see logo-rules.md) */
  --halo-rgb: 255, 217, 170;                        /* glow color of secondary buttons, as "R, G, B" so we can add opacity */
  --focus-width: 2px;                               /* keyboard focus ring thickness */
  --focus-offset: 3px;                              /* gap between element and focus ring */
  --border-width: 1px;                              /* glass edges, buttons, tags */
  --link-hover-thickness: 2px;                      /* underline gets bolder on hover */
  --indicator-width: 2px;                           /* underline under the menu item of the section you're in */
  --icon-size: 1.125rem;                            /* 18px icons in buttons (sun, moon, pause, play) */

  /* --- Color: the wave motif (read by waves.js through data- attributes, listed here as the reference) --- */
  --wave-from: var(--cream-300);                    /* back lines */
  --wave-via: var(--orange-500);                    /* middle lines */
  --wave-to: var(--ember-500);                      /* front lines */
  --wave-opacity: .85;

  /* --- Typography: families --- */
  --font-display: var(--font-stack-display);        /* headings, card titles, logo text */
  --font-body: var(--font-stack-body);              /* everything else */

  /* --- Typography: sizes. clamp(minimum, preferred, maximum) = grows smoothly with the screen --- */
  --text-hero: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);   /* home page greeting */
  --text-h1: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);       /* page and post titles */
  --text-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);        /* sections inside a post */
  --text-h3: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);      /* card titles */
  --text-lead: 1.2rem;                                  /* intro line under a title */
  --text-body: 1.0625rem;                               /* 17px: normal text */
  --text-small: .875rem;                                /* meta, dates */
  --text-caption: .78rem;                               /* captions, labels, tags */
  --text-button: .95rem;                                /* text on normal buttons */
  --text-button-sm: .8rem;                              /* text on small buttons (header tools) */
  --text-brand: 1rem;                                   /* "Robbe Fransen" next to the monogram */

  /* --- Typography: weights --- */
  --weight-body: 400;
  --weight-ui: 600;          /* buttons, nav, labels */
  --weight-strong: 700;      /* tags, small caps labels */
  --weight-title: 500;       /* Clash Display card titles */
  --weight-heading: 600;     /* Clash Display headings */

  /* --- Typography: line heights and spacing --- */
  --leading-tight: 1.05;     /* big headings */
  --leading-snug: 1.25;      /* card titles, h2/h3 */
  --leading-body: 1.65;      /* paragraphs */
  --tracking-heading: -.02em;  /* big Clash headings sit slightly tighter */
  --tracking-label: .12em;     /* UPPERCASE labels get air */

  /* --- Spacing scale (based on 1rem = 16px). Use these for margin, padding and gap --- */
  --space-1: .25rem;   /*  4px */
  --space-2: .5rem;    /*  8px */
  --space-3: .75rem;   /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.75rem;  /* 28px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3.5rem;   /* 56px */
  --space-9: 5rem;     /* 80px */

  /* --- Layout --- */
  --width-content: 72rem;   /* max width of the page */
  --width-prose: 42rem;     /* max width of running text (~70 characters per line) */
  --width-post: 56rem;      /* the column of a post: text, photos and videos all line up to this width */
  --card-min: 18rem;        /* narrowest a post card may get; the feed fits as many columns as possible */
  --thumb-width: 7rem;      /* small image in a post row on category pages */
  --thumb-width-sm: 4.5rem; /* same, on narrow phones */
  --play-size: 4.5rem;      /* round play button on videos */
  --play-icon: 1.75rem;     /* the triangle inside it */
  --gutter: 1rem;           /* minimum space left and right on phones */
  --header-offset: 9rem;    /* sticky header height (2 rows on tablets) + gap: anchors and focus land below it */

  /* --- Click/tap targets (WCAG 2.5.8 asks for 24px minimum; we aim higher) --- */
  --target-min: 44px;       /* buttons, nav links */
  --target-sm: 36px;        /* small tool buttons, chips */
  --pad-btn: .8rem 1.4rem;      /* inside normal buttons (vertical horizontal) */
  --pad-btn-sm: .45rem .9rem;   /* inside small buttons and chips */

  /* --- Shape --- */
  --radius-sm: 6px;         /* small chips, language switch */
  --radius-md: 14px;        /* images inside cards, swatches */
  --radius-lg: 22px;        /* glass panels and cards */
  --radius-pill: 999px;     /* buttons, nav, tags */

  /* --- Glass --- */
  --glass-blur: 18px;
  --glass-saturate: 1.3;
  --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 38%);  /* soft top shine */

  /* --- Shadows and glows --- */
  --shadow-card: 0 20px 50px rgba(0, 0, 0, .45);
  --shadow-card-hover: 0 24px 60px rgba(0, 0, 0, .5), 0 10px 40px -10px rgba(255, 90, 31, .45);
  --glow-accent: 0 0 28px rgba(255, 141, 0, .35);
  --glow-accent-hover: 0 0 40px rgba(255, 141, 0, .55), 0 6px 30px rgba(255, 90, 31, .35);
  --glow-text: 0 0 24px rgba(255, 141, 0, .5), 0 0 60px rgba(255, 90, 31, .35);   /* highlighted heading word */
  --glow-text-hover: 0 0 28px rgba(255, 141, 0, .75), 0 0 80px rgba(255, 90, 31, .55); /* same word under the mouse */
  --glow-halo: inset 0 0 14px rgba(var(--halo-rgb), .22), 0 0 10px rgba(var(--halo-rgb), .22); /* secondary hover */
  --glow-tag: 0 0 14px rgba(255, 141, 0, .45);   /* tags on hover: an orange glow, like the tag itself */
  --inner-shine: inset 0 1px 0 rgba(255, 255, 255, .45);   /* 1px highlight on top of orange buttons */
  --inner-shine-soft: inset 0 1px 0 rgba(255, 255, 255, .08);  /* same, faint, on secondary buttons */
  --inner-shine-mid: inset 0 1px 0 rgba(255, 255, 255, .12);   /* secondary buttons on hover */
  --glow-mark: drop-shadow(0 0 6px rgba(255, 141, 0, .7));      /* monogram on hover (CSS filter) */

  /* --- Motion --- */
  --duration-fast: 150ms;    /* color changes */
  --duration-base: 250ms;    /* hover lifts, glows */
  --duration-slow: 400ms;    /* panels appearing */
  --ease-out: cubic-bezier(.2, .7, .2, 1);   /* starts fast, lands softly */
  --lift-card: .5rem;        /* how far a card rises on hover (8px) */
  --tilt-max: 8deg;          /* how far a card leans toward the mouse, edge to edge (assets/js/tilt.js) */
  --tilt-depth: 900px;       /* 3D distance for the tilt: smaller = a stronger 3D effect */

  /* tell the browser which built-in controls (scrollbars, form fields) to draw */
  color-scheme: dark;
}


/* --------------------------------------------------------------------------
   4. LIGHT THEME (secondary)
   Used when the visitor's system is set to light mode, OR when the theme
   toggle sets <html data-theme="light">. A toggle choice always wins:
   data-theme="dark" blocks the automatic switch.
   The block appears twice because CSS can't share one block between a media
   query and an attribute selector. Keep both copies identical!
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: var(--cream-100);
    --color-bg-glow-1: rgba(255, 141, 0, .14);
    --color-bg-glow-2: rgba(255, 90, 31, .10);
    --color-surface: rgba(255, 251, 245, .62);
    --color-surface-solid: var(--cream-50);
    --color-surface-hover: rgba(30, 30, 30, .04);
    --color-text: var(--carbon-800);              /* 13.7:1 worst case */
    --color-text-muted: var(--cream-800);         /* 6.5:1 worst case */
    --color-text-accent: var(--orange-800);       /* 5.4:1 worst case */
    --color-heading-accent: var(--orange-800);
    --color-border: rgba(30, 30, 30, .12);
    --color-border-rim: rgba(255, 255, 255, .85);
    --color-border-ui: #8A7F74;                   /* 3.6:1 */
    --color-focus: var(--carbon-800);
    --color-logo: var(--carbon-800);
    --halo-rgb: 255, 141, 0;
    --wave-from: var(--orange-300);
    --shadow-card: 0 20px 50px rgba(92, 79, 67, .18);
    --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 38%);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --color-bg: var(--cream-100);
  --color-bg-glow-1: rgba(255, 141, 0, .14);
  --color-bg-glow-2: rgba(255, 90, 31, .10);
  --color-surface: rgba(255, 251, 245, .62);
  --color-surface-solid: var(--cream-50);
  --color-surface-hover: rgba(30, 30, 30, .04);
  --color-text: var(--carbon-800);
  --color-text-muted: var(--cream-800);
  --color-text-accent: var(--orange-800);
  --color-heading-accent: var(--orange-800);
  --color-border: rgba(30, 30, 30, .12);
  --color-border-rim: rgba(255, 255, 255, .85);
  --color-border-ui: #8A7F74;
  --color-focus: var(--carbon-800);
  --color-logo: var(--carbon-800);
  --halo-rgb: 255, 141, 0;
  --wave-from: var(--orange-300);
  --shadow-card: 0 20px 50px rgba(92, 79, 67, .18);
  --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, .6), transparent 38%);
  color-scheme: light;
}


/* --------------------------------------------------------------------------
   5. USER PREFERENCES (accessibility settings in the visitor's OS)
   -------------------------------------------------------------------------- */

/* "Reduce motion": transitions become instant. waves.js also stops all wave animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --tilt-max: 0deg;          /* cards rise on hover, but don't lean toward the mouse */
  }
}

/* "Reduce transparency": glass becomes solid, so text never sits on moving waves.
   :root:root:root is the same element three times = a "heavier" rule, so this
   accessibility setting beats the light-theme blocks above in every case. */
@media (prefers-reduced-transparency: reduce) {
  :root:root:root {
    --color-surface: var(--color-surface-solid);
    --glass-blur: 0px;
  }
}