/* ============================================================================
   tokens.css — Design tokens for RaidPixels
   Concept: "Digitales Atelier am Bodensee" — editorial, luxe-minimal, dark ink
   canvas with bone-paper interludes. Refined serif display + precise mono labels.
   Signature: the orbit/constellation logomark + oversized serif numerals +
   champagne hairlines. Everything is driven from these custom properties.
   ============================================================================ */

:root {
  /* — Colour: ink canvas ————————————————————————————————————————————— */
  --c-bg:          #0C0D12;   /* near-black, cool tint                  */
  --c-bg-2:        #0A0B0F;   /* deepest, for footer / pools of shadow  */
  --c-surface:     #14161F;   /* raised card on ink                     */
  --c-surface-2:   #1C1F2B;   /* hover / nested surface                 */
  --c-line:        #262A38;   /* hairline on ink                        */
  --c-ink:         #F4F1EA;   /* primary text on ink (bone-white)       */
  --c-muted:       #9CA1B4;   /* secondary text on ink                  */
  --c-faint:       #6A6F82;   /* tertiary / captions on ink             */

  /* — Colour: bone paper (light interlude sections) ——————————————————— */
  --c-paper:       #F3EFE6;   /* warm bone                              */
  --c-paper-2:     #EAE4D6;   /* slightly deeper paper                  */
  --c-paper-line:  #D9D2C2;   /* hairline on paper                      */
  --c-paper-ink:   #16171C;   /* text on paper                          */
  --c-paper-muted: #5A5847;   /* muted text on paper (warm)             */

  /* — Brand + accent ——————————————————————————————————————————————————— */
  --c-brand:       #5468FF;   /* refined cobalt — nod to the logo blue  */
  --c-brand-soft:  #8C99FF;   /* lighter cobalt for text on ink         */
  --c-accent:      #C9A86A;   /* champagne / brass — used < 5% of page  */
  --c-accent-deep: #A8884A;   /* brass on paper (contrast)              */

  /* — Fluid type scale (ratio ~1.25, clamp from 480→1280) ————————————— */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.55rem);
  --step-2:  clamp(1.56rem, 1.40rem + 0.80vw, 2.15rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.45vw, 3.00rem);
  --step-4:  clamp(2.44rem, 1.96rem + 2.40vw, 4.30rem);
  --step-5:  clamp(3.05rem, 2.22rem + 4.15vw, 6.40rem);
  --step-6:  clamp(3.80rem, 2.30rem + 7.50vw, 9.50rem); /* hero / display */

  /* — Type families ———————————————————————————————————————————————————— */
  --font-display: "Iowan Old Style", "Palatino Linotype", "Palatino",
                  "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
                  "Roboto Mono", Menlo, Consolas, monospace;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --tracking-label: 0.26em;   /* mono small-caps tracking */
  --tracking-tight: -0.018em; /* big serif optical tightening */

  /* — Spacing scale (ratio 1.5, base 1rem) ———————————————————————————— */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.25rem;
  --sp-xl:  3.5rem;
  --sp-2xl: 5.5rem;
  --sp-3xl: 8.5rem;
  --sp-4xl: 12rem;

  /* — Layout ——————————————————————————————————————————————————————————— */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 64ch;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* — Radius / border —————————————————————————————————————————————————— */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;
  --hair: 1px;

  /* — Shadow (long, soft, premium) ———————————————————————————————————— */
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-3: 0 40px 80px -32px rgba(0,0,0,.65);
  --glow-brand: 0 0 0 1px rgba(84,104,255,.35), 0 18px 60px -22px rgba(84,104,255,.55);

  /* — Motion ——————————————————————————————————————————————————————————— */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-inout:  cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
  --dur-reveal: 720ms;
}