/* ============================================================
   tokens.css — RaidPixels design tokens
   Concept: "Orbit" — precise · premium · kinetic.
   Royal indigo + warm paper + near-black, one electric accent.
   Monospace display (brand heritage) + clean grotesque body.
   Drive EVERYTHING from these custom properties.
   ============================================================ */

:root {
  /* ---- Colour : warm-paper light theme ---------------------- */
  --c-bg:            #f3f1e9;  /* warm paper page */
  --c-bg-2:         #eceadf;  /* deeper paper band */
  --c-surface:      #fbfaf4;  /* raised card */
  --c-surface-2:    #ffffff;  /* highest surface */
  --c-ink:          #0d0d16;  /* near-black text / dark bands */
  --c-ink-2:        #34343f;  /* secondary text */
  --c-muted:        #6a6a78;  /* muted / meta */
  --c-line:         rgba(13, 13, 22, .12);  /* hairline rule */
  --c-line-strong:  rgba(13, 13, 22, .26);

  --c-brand:        #4b49e4;  /* royal indigo — brand heritage */
  --c-brand-ink:    #2e2ca8;  /* AA indigo for text on paper */
  --c-brand-soft:   #e7e6fb;  /* lilac surface */
  --c-brand-soft-2: #d9d8f6;  /* lilac, a touch deeper */

  --c-accent:       #d8ff3e;  /* electric chartreuse — used < 5% */
  --c-accent-ink:   #1b2400;  /* readable text on accent */

  /* ---- Colour : dark band (inverted) ------------------------ */
  --c-dark:          #0d0d16;
  --c-dark-2:        #15151f;
  --c-on-dark:       #f3f1e9;
  --c-on-dark-muted: rgba(243, 241, 233, .64);
  --c-on-dark-line:  rgba(243, 241, 233, .16);

  /* ---- Selection / focus ------------------------------------ */
  --c-focus:        var(--c-brand);

  /* ---- Typography ------------------------------------------- */
  --f-display: "Space Mono", "IBM Plex Mono", "JetBrains Mono",
               ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-body:    "Inter", "Helvetica Neue", system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono:    var(--f-display);

  /* Fluid type scale — ratio ~1.25, clamps 480→1280 */
  --step--2: clamp(.694rem, .67rem + .12vw, .76rem);
  --step--1: clamp(.833rem, .79rem + .2vw,  .95rem);
  --step-0:  clamp(1rem,    .95rem + .25vw, 1.125rem);
  --step-1:  clamp(1.2rem,  1.1rem + .5vw,  1.5rem);
  --step-2:  clamp(1.44rem, 1.27rem + .85vw, 2rem);
  --step-3:  clamp(1.728rem, 1.45rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.07rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5:  clamp(2.49rem, 1.7rem + 3.95vw, 4.8rem);
  --step-6:  clamp(2.98rem, 1.6rem + 6.9vw, 6.4rem);

  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-body:   1.62;
  --tracking-label: .18em;   /* uppercase mono labels */
  --tracking-tight: -.01em;

  /* ---- Spacing scale (ratio 1.5) ---------------------------- */
  --sp-3xs: .25rem;
  --sp-2xs: .5rem;
  --sp-xs:  .75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.25rem;
  --sp-xl:  3.375rem;
  --sp-2xl: 5rem;
  --sp-3xl: 7.5rem;
  --sp-4xl: 11rem;

  /* ---- Layout ----------------------------------------------- */
  --container:    1240px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter:       clamp(1.15rem, 4.5vw, 3rem);
  --measure:      66ch;
  --section-y:    clamp(3.75rem, 9vw, 8.5rem);

  /* ---- Radius / border -------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;
  --bw: 1.5px;            /* hairline weight */

  /* ---- Shadow ----------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(13,13,22,.05), 0 2px 6px rgba(13,13,22,.05);
  --shadow-2: 0 6px 18px rgba(13,13,22,.08), 0 2px 6px rgba(13,13,22,.05);
  --shadow-3: 0 24px 60px rgba(13,13,22,.14), 0 8px 22px rgba(13,13,22,.08);
  --shadow-brand: 0 18px 48px rgba(75,73,228,.28);

  /* ---- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .14s;
  --dur-2: .26s;
  --dur-3: .42s;
  --dur-4: .7s;

  /* ---- Z-index ---------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Subtle dark-mode courtesy: keep the warm/premium feel, never pure black UI.
   The site is light-first by design; this only softens for OS dark preference. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:        #0e0e17;
    --c-bg-2:      #14141f;
    --c-surface:   #16161f;
    --c-surface-2: #1d1d28;
    --c-ink:       #f1efe7;
    --c-ink-2:     #cecbd8;
    --c-muted:     #9b9aa8;
    --c-line:      rgba(243,241,233,.14);
    --c-line-strong: rgba(243,241,233,.28);
    --c-brand-ink: #b9b8fb;
    --c-brand-soft:  #1c1b34;
    --c-brand-soft-2:#23224a;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 8px 22px rgba(0,0,0,.45);
    --shadow-3: 0 26px 64px rgba(0,0,0,.6);
  }
}