/* ============================================================================
   WOBBLE FORGE — tokens.css
   File 1/6. Design tokens only: palette, materials, spacing, radii, shadows,
   typography, motion, layering, safe areas, plus one token block per device
   class. Nothing in here draws; every other sheet consumes these variables.
   Offline-safe: zero external requests.
   ========================================================================== */

:root {
  /* ---- Core identity palette (style-lock) --------------------------------- */
  --wf-navy:        #232A4A;   /* outline + darkest structural ink            */
  --wf-navy-900:    #1A2038;
  --wf-navy-800:    #2C355C;
  --wf-navy-ink:    #141829;   /* deepest outline / text on light surfaces    */
  --wf-gold:        #FFC93C;   /* dominant accent — primary action, rewards   */
  --wf-gold-600:    #E2A91C;
  --wf-gold-800:    #A8740C;
  --wf-cyan:        #35C4E8;   /* rewarded / special interaction              */
  --wf-cyan-600:    #1F9CC2;
  --wf-cyan-800:    #17748F;
  --wf-red:         #E8402F;   /* danger + destructive                        */
  --wf-red-600:     #C22C1D;
  --wf-red-800:     #8E1E13;
  --wf-green:       #4ADE80;   /* success / stable                            */
  --wf-green-600:   #2FB862;
  --wf-green-800:   #1E7C42;
  --wf-violet:      #8A5CF6;   /* sticky / special material                   */
  --wf-violet-600:  #6E3FDB;
  --wf-violet-800:  #4E2A9E;
  --wf-cream:       #FFF3DC;   /* light surface + body text on dark           */
  --wf-cream-600:   #E8D6B4;
  --wf-cream-800:   #C6B189;
  --wf-grey:        #C9C4B8;   /* neutral UI / secondary buttons              */
  --wf-grey-600:    #9E9A8F;
  --wf-grey-800:    #6E6A61;

  /* ---- Materials: shaded face @ top face ---------------------------------- */
  --wf-wood:        #E9A83E;   --wf-wood-dark:   #B06C1E;
  --wf-stone:       #A8B0BE;   --wf-stone-dark:  #6E7787;
  --wf-metal:       #9FB2C6;   --wf-metal-dark:  #5D7085;
  --wf-ice:         #9BE3F5;   --wf-ice-dark:    #3A9FCC;
  --wf-rubber:      #E8452F;   --wf-rubber-dark: #A82C1C;
  --wf-sticky:      #A855D8;   --wf-sticky-dark: #6E2B9C;

  /* ---- Semantic roles ------------------------------------------------------ */
  --wf-ink:         var(--wf-navy);
  --wf-ink-soft:    rgba(35, 42, 74, 0.72);
  --wf-bg-a:        #2C3660;   /* controlled two-stop backdrop, top          */
  --wf-bg-b:        #171C31;   /* controlled two-stop backdrop, bottom       */
  --wf-surface:     var(--wf-cream);
  --wf-surface-2:   #F4E6C9;
  --wf-surface-3:   var(--wf-grey);
  --wf-line:        var(--wf-navy);
  --wf-line-w:      3px;
  --wf-line-w-thin: 2px;
  --wf-focus:       var(--wf-gold);
  --wf-ok:          var(--wf-green);
  --wf-warn:        var(--wf-gold);
  --wf-danger:      var(--wf-red);
  --wf-critical:    var(--wf-red-600);
  --wf-scrim:       rgba(20, 24, 41, 0.62);

  /* ---- Spacing scale ------------------------------------------------------- */
  --wf-sp-0: 0px;
  --wf-sp-1: 4px;
  --wf-sp-2: 8px;
  --wf-sp-3: 12px;
  --wf-sp-4: 16px;
  --wf-sp-5: 20px;
  --wf-sp-6: 24px;
  --wf-sp-7: 32px;
  --wf-sp-8: 40px;
  --wf-sp-9: 56px;

  /* ---- Radii --------------------------------------------------------------- */
  --wf-r-xs:  6px;
  --wf-r-sm:  8px;
  --wf-r-md:  12px;
  --wf-r-lg:  16px;
  --wf-r-xl:  22px;
  --wf-r-pill: 999px;

  /* ---- Shadows: hard offset so surfaces read as physically pressable ------- */
  --wf-sh-1: 0 2px 0 var(--wf-navy);
  --wf-sh-2: 0 4px 0 var(--wf-navy);
  --wf-sh-3: 0 6px 0 var(--wf-navy);
  --wf-sh-4: 0 8px 0 var(--wf-navy);
  --wf-sh-2-soft: 0 4px 0 rgba(22, 26, 46, 0.45);
  --wf-sh-card:  0 6px 0 rgba(22, 26, 46, 0.55), 0 16px 30px rgba(0, 0, 0, 0.26);
  --wf-sh-panel: 0 10px 0 rgba(22, 26, 46, 0.5), 0 26px 64px rgba(0, 0, 0, 0.42);
  --wf-sh-inset: inset 0 3px 0 rgba(255, 255, 255, 0.34),
                 inset 0 -4px 0 rgba(22, 26, 46, 0.16);
  --wf-sh-ring:  0 0 0 3px var(--wf-focus), 0 0 0 6px rgba(255, 201, 60, 0.28);

  /* ---- Typography ---------------------------------------------------------- */
  --wf-font-display: "Arial Black", "Arial Bold", "Franklin Gothic Heavy",
                     Impact, "Haettenschweiler", system-ui, "Segoe UI", sans-serif;
  --wf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --wf-font-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo,
                  Consolas, monospace;

  --wf-fs-nano: 10px;
  --wf-fs-xs:   11px;
  --wf-fs-sm:   13px;
  --wf-fs-md:   15px;
  --wf-fs-lg:   18px;
  --wf-fs-xl:   22px;
  --wf-fs-2xl:  28px;
  --wf-fs-3xl:  36px;
  --wf-fs-4xl:  46px;
  --wf-fs-5xl:  64px;

  --wf-ls-tight: -0.03em;
  --wf-ls-wide:  0.12em;
  --wf-ls-wider: 0.2em;
  --wf-lh-tight: 0.98;
  --wf-lh-snug:  1.14;

  /* ---- Motion -------------------------------------------------------------- */
  --wf-dur-instant: 90ms;
  --wf-dur-fast:    130ms;
  --wf-dur-base:    200ms;
  --wf-dur-slow:    320ms;
  --wf-dur-float:   3600ms;
  --wf-ease-out:    cubic-bezier(0.2, 0.8, 0.3, 1);
  --wf-ease-in:     cubic-bezier(0.55, 0, 0.9, 0.4);
  --wf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wf-ease-spring: cubic-bezier(0.22, 1.35, 0.36, 1);

  /* ---- Layering ------------------------------------------------------------ */
  --wf-z-canvas:  0;
  --wf-z-bg:      1;
  --wf-z-fx:      5;
  --wf-z-ui:      10;
  --wf-z-hud:     12;
  --wf-z-screen:  14;
  --wf-z-overlay: 20;
  --wf-z-toast:   40;
  --wf-z-sr:      60;

  /* ---- Safe-area insets ---------------------------------------------------- */
  --wf-safe-t: env(safe-area-inset-top, 0px);
  --wf-safe-r: env(safe-area-inset-right, 0px);
  --wf-safe-b: env(safe-area-inset-bottom, 0px);
  --wf-safe-l: env(safe-area-inset-left, 0px);

  /* ---- Device geometry (defaults == desktop landscape) --------------------- */
  --wf-u:          1;
  --wf-pad-edge:   var(--wf-sp-6);
  --wf-tower-band: 44%;      /* reserved clear column for the tower            */
  --wf-rail-w:     172px;
  --wf-ctl-size:   66px;
  --wf-ctl-gap:    var(--wf-sp-3);
  --wf-controls-h: 84px;
  --wf-hud-gap:    var(--wf-sp-5);
  --wf-btn-h:      54px;
  --wf-btn-pad-x:  var(--wf-sp-7);
  --wf-plate-pad:  10px 14px;
  --wf-plate-min:  64px;
  --wf-panel-w:    520px;
  --wf-tap-min:    48px;
  --wf-next-size:  128px;

  /* Effect layers (driven by JS via inline style) ---------------------------- */
  --wf-level: 0;
}

/* ============================================================================
   DEVICE TOKEN BLOCKS
   index.html sets #app[data-device] and #app[data-orientation].
   These scale geometry, never the identity palette.
   ========================================================================== */

#app[data-device="desktop"] {
  --wf-u:          1;
  --wf-pad-edge:   var(--wf-sp-7);
  --wf-tower-band: 44%;
  --wf-rail-w:     176px;
  --wf-hud-gap:    var(--wf-sp-5);
  --wf-btn-h:      56px;
  --wf-btn-pad-x:  var(--wf-sp-8);
  --wf-ctl-size:   68px;
  --wf-plate-min:  72px;
  --wf-panel-w:    540px;
  --wf-next-size:  136px;
  --wf-tap-min:    44px;
}

#app[data-device="tablet"] {
  --wf-u:          0.96;
  --wf-pad-edge:   var(--wf-sp-5);
  --wf-tower-band: 50%;
  --wf-rail-w:     148px;
  --wf-hud-gap:    var(--wf-sp-4);
  --wf-btn-h:      58px;
  --wf-btn-pad-x:  var(--wf-sp-6);
  --wf-ctl-size:   72px;
  --wf-ctl-gap:    var(--wf-sp-4);
  --wf-plate-min:  68px;
  --wf-panel-w:    560px;
  --wf-next-size:  132px;
  --wf-tap-min:    52px;
}

#app[data-device="mobile"] {
  --wf-u:          0.9;
  --wf-pad-edge:   var(--wf-sp-3);
  --wf-tower-band: 56%;
  --wf-rail-w:     84px;
  --wf-hud-gap:    var(--wf-sp-2);
  --wf-btn-h:      56px;
  --wf-btn-pad-x:  var(--wf-sp-5);
  --wf-ctl-size:   60px;
  --wf-ctl-gap:    10px;
  --wf-controls-h: 96px;
  --wf-plate-min:  58px;
  --wf-plate-pad:  6px 10px;
  --wf-panel-w:    min(92vw, 460px);
  --wf-next-size:  76px;
  --wf-tap-min:    48px;
  --wf-fs-5xl:     42px;
  --wf-fs-4xl:     34px;
  --wf-fs-3xl:     28px;
  --wf-fs-2xl:     23px;
  --wf-fs-xl:      19px;
}

/* Orientation refinements (compose with the device block above) ------------- */
#app[data-orientation="landscape"] {
  --wf-controls-h: 84px;
}

#app[data-orientation="portrait"] {
  --wf-tower-band: 68%;
  --wf-controls-h: 132px;
  --wf-rail-w:     72px;
  --wf-pad-edge:   var(--wf-sp-4);
}

/* Portrait phones get the narrowest possible chrome. */
#app[data-device="mobile"][data-orientation="portrait"] {
  --wf-pad-edge:   var(--wf-sp-3);
  --wf-plate-min:  52px;
  --wf-next-size:  64px;
  --wf-ctl-size:   62px;
}

/* Large desktop canvases can afford a wider tower band + playful type. */
@media (min-width: 1600px) and (min-height: 900px) {
  #app[data-device="desktop"] {
    --wf-tower-band: 42%;
    --wf-fs-5xl: 74px;
    --wf-fs-4xl: 54px;
    --wf-rail-w: 196px;
    --wf-next-size: 152px;
  }
}