/* Doxa Digital — design tokens. Every colour, type and spacing value lives here.
   Nothing downstream hardcodes a hex. */

/* ---- Fonts -------------------------------------------------------------
   Self-hosted, subset by tools/subset-fonts.sh. One file per family: the
   latin-ext slices are gone and Latin-1 is merged in, so there is no
   unicode-range split to maintain. Bricolage and Hanken keep their weight
   axis, so every weight the design uses costs one file.

   Bricolage's optical-size axis is pinned at 32 (see tools/subset-fonts.sh),
   hence font-optical-sizing: none below — without it a browser would try to
   vary an axis that no longer exists.

   Note: the arrow (U+2192) and tick (U+2713) are not in any of these faces and
   never were in the original design either. They are drawn as inline SVG, not
   typed as characters. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/hanken-grotesk-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-400.woff2') format('woff2');
}

/* The italic carries the headline accent — the serif "Nobody" set against the
   grotesque. It is not decoration; without it the hero loses its whole voice. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/space-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/space-mono-700.woff2') format('woff2');
}

:root {
  /* ---- Colour ----------------------------------------------------------
     Contrast ratios below are measured, not estimated. AA body needs 4.5:1,
     AA large text needs 3:1. */

  --ink:            #16120D;  /* 17.73:1 on --bone */
  --gold:           #E5C58C;  /* 11.27:1 on --ink. Only 1.57:1 on --bone: dark grounds only */
  --gold-deep:      #7A5C1E;  /*  5.91:1 on --bone. The gold for light grounds */

  --bone:           #FBF9F5;  /* page ground */
  --bone-warm:      #FBF6EC;  /* alternating section ground */
  --bone-deep:      #EFEBE3;  /* third step, section dividers */
  --bone-sand:      #F2EDE3;

  --line:           #E2DACB;  /* default border */
  --line-strong:    #D5CCBB;
  --line-muted:     #D0C7B5;
  --line-deep:      #BFB4A1;  /* 9.11:1 on --ink: safe as text on dark */

  --muted:          #6B6455;  /*  5.58:1 on --bone. Body secondary — AA pass */
  --muted-soft:     #9A9182;  /*  2.96:1 on --bone. FAILS AA. Decorative rules
                                 and icons only. Never text. */

  /* Leak red carries meaning: money leaving. Gold is what we recover. Never
     use one where the other belongs — that swap is what made v1 read as
     decoration rather than information. */
  --leak:           #D9573F;  /* 5.09:1 on --ground — passes AA as body text, not just large */
  --leak-dim:       #A33A26;  /* 3.02:1 — bar fills and other non-text graphics only */

  --ground:         #0C0906;  /* the page. Deeper than --ink, which is now a surface */
  --rule:           rgb(229 197 140 / 0.22);
  --rule-soft:      rgb(229 197 140 / 0.10);
  --text:           #EFE9DC;
  --text-dim:       rgb(239 233 220 / 0.55);
  --text-faint:     rgb(239 233 220 / 0.35);

  --surface-dark:   #2E2820;
  --surface-dark-2: #322A21;
  --surface-dark-3: #3A3129;
  --surface-dark-4: #3A342C;
  --on-dark:        #D0C7B5;  /* 11.11:1 on --ink */

  /* ---- Type ------------------------------------------------------------ */

  --optical-sizing: none;   /* Bricolage's opsz axis is pinned; see tools/subset-fonts.sh */

  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale. Lower bound is the 375px phone, upper bound the 1360px canvas. */
  --step--1: clamp(0.80rem, 0.77rem + 0.13vw, 0.88rem);
  --step-0:  clamp(0.94rem, 0.90rem + 0.19vw, 1.06rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.56vw, 1.72rem);
  --step-3:  clamp(1.62rem, 1.41rem + 0.89vw, 2.19rem);
  --step-4:  clamp(1.94rem, 1.62rem + 1.36vw, 2.80rem);
  --step-5:  clamp(2.33rem, 1.86rem + 2.02vw, 3.57rem);
  --step-6:  clamp(2.80rem, 2.11rem + 2.94vw, 4.55rem);

  /* ---- Space ----------------------------------------------------------- */

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: clamp(4rem, 2rem + 8vw, 7.5rem);  /* section rhythm */

  /* ---- Layout ---------------------------------------------------------- */

  --measure: 1360px;   /* the canvas width the design was drawn at */
  --gutter:  clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --radius:  14px;
  --radius-sm: 8px;
}

/* ---- Surface textures ---------------------------------------------------
   Lifted verbatim from the design canvas. Every section sits on a faint 78px
   grid with a warm radial bloom placed differently per section; that texture
   is most of why the page reads as designed rather than assembled. */

:root {
  --grid-light:
    repeating-linear-gradient(0deg,  rgb(22 18 13 / 0.045) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(90deg, rgb(22 18 13 / 0.045) 0 1px, transparent 1px 78px);
  --grid-dark:
    repeating-linear-gradient(0deg,  rgb(229 197 140 / 0.05) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(90deg, rgb(229 197 140 / 0.05) 0 1px, transparent 1px 78px);
}