/* ==========================================================================
   vein.pub — design tokens
   Palette in OKLCH, every neutral tinted warm. Never pure #000 / #fff.
   ========================================================================== */

:root {
  /* --- color: warm near-black canvas + one arterial accent --------------- */
  --ink:        oklch(0.132 0.006 40);   /* the canvas                       */
  --ink-deep:   oklch(0.098 0.006 40);   /* wells, vignette, finale          */
  --ink-raise:  oklch(0.172 0.006 40);   /* barely-raised planes             */
  --graphite:   oklch(0.42 0.006 40);    /* structural mid                   */
  --ash:        oklch(0.62 0.006 60);    /* captions, secondary type         */
  --ash-dim:    oklch(0.575 0.006 55);   /* quietest legible text (AA)       */
  --bone:       oklch(0.92 0.008 75);    /* primary type, warm off-white     */
  --bone-hi:    oklch(0.975 0.006 85);   /* rare highlight                   */
  --vein:       oklch(0.55 0.185 26);    /* THE accent: deep blood red       */
  --vein-red:   oklch(0.585 0.212 27);   /* brand red — the bat mark         */
  --vein-text:  oklch(0.635 0.16 28);    /* accent text on black (AA)        */
  --vein-dim:   oklch(0.40 0.11 24);     /* accent at rest                   */

  --hairline:   color-mix(in oklab, var(--bone) 14%, transparent);
  --hairline-2: color-mix(in oklab, var(--bone) 7%, transparent);

  /* filmic grain, inline SVG noise (no network) */
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* --- type: fashion-editorial pairing, no network fonts ----------------- */
  --font-display: "Didot", "Bodoni MT", "Bodoni 72", "Didot LT STD",
                  "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-grotesk: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial,
                  system-ui, sans-serif;

  /* fluid scale, ratio ~1.33, display allowed to break the viewport */
  --fs-mega:    clamp(4.5rem, 20.5vw, 24rem);
  --fs-display: clamp(2.9rem, 10vw, 11rem);
  --fs-h1:      clamp(2.1rem, 6.2vw, 6rem);
  --fs-h2:      clamp(1.7rem, 4vw, 3.4rem);
  --fs-h3:      clamp(1.3rem, 2.4vw, 2.1rem);
  --fs-lead:    clamp(1.06rem, 1.5vw, 1.5rem);
  --fs-body:    clamp(0.95rem, 1.05vw, 1.075rem);
  --fs-label:   clamp(0.62rem, 0.74vw, 0.72rem);
  --fs-micro:   clamp(0.56rem, 0.66vw, 0.64rem);

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-body: 1.6;

  --track-label: 0.34em;
  --track-wide:  0.5em;

  /* --- spacing (rem ladder, irregular for rhythm) ------------------------ */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.375rem;
  --s-4: 2.25rem;
  --s-5: 3.5rem;
  --s-6: 5.5rem;
  --s-7: 8.5rem;
  --s-8: 13rem;
  --s-9: 20rem;

  /* generous editorial gutters, fluid */
  --gutter: clamp(1.25rem, 5.5vw, 7rem);
  --measure: 62ch;

  /* --- motion ----------------------------------------------------------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.45s;
  --dur-2: 0.8s;
  --dur-3: 1.15s;
  --dur-4: 1.6s;

  /* --- layers ----------------------------------------------------------- */
  --z-scene: 1;
  --z-rail: 40;
  --z-chrome: 50;
  --z-grain: 90;
  --z-cursor: 100;
  --z-veil: 120;

  color-scheme: dark;
}