/* ==========================================================================
   bimon.net - design tokens
   Single source of truth for colour, type, space and motion.
   Each value is documented in DESIGN.md with its research provenance.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- colour: light ("warm paper") ----------
     A warm off-white canvas instead of pure #fff. Pure white glares at full
     brightness; paper reads as considered rather than as a browser default. */
  --bg:            #F1EFE9;
  --bg-elev:       #FAF9F5;
  --bg-sunken:     #E7E4DB;
  --ink:           #16150F;  /* 15.91:1 on --bg */
  --ink-2:         #3A3831;
  --ink-dim:       #69655B;  /* >=4.55:1 on --bg, --bg-elev AND --bg-sunken */
  /* --ink-faint is ORNAMENT ONLY (hairlines, the active-nav dot, list markers).
     An audit with axe-core caught it being used for small text, where it fails
     4.5:1 in both themes - all text now uses --ink-dim. Do not put text on it. */
  --ink-faint:     #97927F;
  --line:          color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong:   color-mix(in srgb, var(--ink) 30%, transparent);
  --accent:        #BC3F28;  /* 4.71:1 on --bg */
  --accent-ink:    #8E2A18;
  --accent-soft:   color-mix(in srgb, var(--accent) 12%, transparent);
  --selection:     color-mix(in srgb, var(--accent) 24%, transparent);
  --shadow-1: 0 1px 2px rgb(22 21 15 / .04), 0 10px 30px -14px rgb(22 21 15 / .20);
  --shadow-2: 0 2px 4px rgb(22 21 15 / .05), 0 24px 60px -24px rgb(22 21 15 / .28);
  --grain-opacity: .035;

  /* ---------- typography ----------
     Three families, three jobs, no overlap:
       display -> Instrument Serif, the editorial voice (CJK serif fallback)
       sans    -> Inter Tight, the workhorse UI face
       mono    -> JetBrains Mono, labels, indices, meta text
     CJK deliberately falls back to system faces: a webfont CJK subset is
     multi-megabyte and would wreck LCP on a portfolio. */
  --font-display: "Instrument Serif", "Songti SC", "Noto Serif SC", "SimSun", Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Fluid type scale: clamp(min, preferred, max) scales continuously from
     380px to 1600px, so there are no typographic jumps at breakpoints. */
  --step--2: clamp(0.69rem, 0.68rem + 0.06vw, 0.75rem);
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.875rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.0625rem);
  --step-1:  clamp(1.14rem, 1.07rem + 0.34vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.70vw, 1.90rem);
  --step-3:  clamp(1.72rem, 1.38rem + 1.55vw, 2.90rem);
  --step-4:  clamp(2.30rem, 1.55rem + 3.40vw, 4.80rem);
  --step-5:  clamp(2.90rem, 1.30rem + 7.20vw, 8.60rem);

  --leading-tight: 0.98;
  --leading-snug: 1.14;
  --leading-body: 1.65;
  --tracking-display: -0.022em;
  --tracking-tight: -0.012em;
  --tracking-mono: 0.12em;

  /* ---------- space: one 4px-rooted ladder ---------- */
  --s-3xs: 0.25rem;
  --s-2xs: 0.5rem;
  --s-xs:  0.75rem;
  --s-s:   1rem;
  --s-m:   1.5rem;
  --s-l:   2.25rem;
  --s-xl:  3.5rem;
  --s-2xl: 5.5rem;
  --s-3xl: 8rem;

  /* ---------- layout ---------- */
  --page-max: 1360px;
  --gutter: clamp(1.25rem, 4.2vw, 3.5rem);
  --measure: 62ch;          /* body copy */
  --measure-narrow: 46ch;   /* hero deck */
  --header-h: 4.25rem;

  /* ---------- radii ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-full: 999px;

  /* ---------- motion ----------
     Two curves do 95% of the work. --ease-swift is the classic
     cubic-bezier(.165,.84,.44,1) used by design-engineering sites for UI
     feedback; --ease-out-quint is for entrances, where the long tail reads
     as settling rather than stopping. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 380ms;
  --dur-4: 700ms;
  --dur-5: 1100ms;
  --ease-swift: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* ---------- z-index ladder ---------- */
  --z-guides: 1;
  --z-content: 10;
  --z-header: 100;
  --z-preview: 200;
  --z-overlay: 300;
}

/* ---------- colour: dark ("ink") ----------
   Not a mechanical inversion: the dark canvas is a warm near-black so the
   site keeps its paper feeling instead of looking like a terminal. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0E0D0B;
  --bg-elev:       #161512;
  --bg-sunken:     #070706;
  --ink:           #EDEAE2;  /* 16.16:1 on --bg */
  --ink-2:         #C7C3B7;
  --ink-dim:       #8D8878;  /* 5.48:1 on --bg */
  --ink-faint:     #5C584F;
  --line:          color-mix(in srgb, var(--ink) 15%, transparent);
  --line-strong:   color-mix(in srgb, var(--ink) 32%, transparent);
  --accent:        #FF6A45;  /* 6.84:1 on --bg */
  --accent-ink:    #FF8A6B;
  --accent-soft:   color-mix(in srgb, var(--accent) 16%, transparent);
  --selection:     color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .5), 0 10px 30px -14px rgb(0 0 0 / .7);
  --shadow-2: 0 2px 4px rgb(0 0 0 / .5), 0 24px 60px -24px rgb(0 0 0 / .8);
  --grain-opacity: .05;
}

/* Users who ask for more contrast get harder lines and darker dim tones. */
@media (prefers-contrast: more) {
  :root {
    --ink-dim: #4A473E;
    --line: color-mix(in srgb, var(--ink) 32%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 55%, transparent);
  }
  [data-theme="dark"] {
    --ink-dim: #B8B3A5;
    --line: color-mix(in srgb, var(--ink) 34%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 58%, transparent);
  }
}