/* Snow Scraper — flattened stylesheet for dist */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Snow Scraper — Webfonts
   All three families are served from Google Fonts (no local
   binaries). Consumers linking styles.css inherit them via this
   single @import. If you vendor the fonts later, replace this
   with @font-face rules pointing at the copied files.
   ------------------------------------------------------------
   Schibsted Grotesk — display / headlines (from Powder Oracle)
   Inter             — UI + body copy (from Snow Scraper site)
   JetBrains Mono    — data, eyebrows, labels (both products)
   ============================================================ */




/* ===== tokens/colors.css ===== */
/* ============================================================
   Snow Scraper — Color System
   Two surfaces live under one brand:
   · NIGHT  — deep twilight blue (the Snow Scraper device site)
   · VOID   — near-black alpine (the Powder Oracle)
   Both are dark-first. The single unifying hue is ICE BLUE,
   which reads as lit snow, not "tech brand blue."
   ============================================================ */

:root {
  /* ---- Night blues (Snow Scraper device canvas) ---- */
  --night-950: #06080b;   /* deepest — shared with Oracle void */
  --night-900: #0a1524;   /* deep night blue — device bg base  */
  --night-850: #0a0e13;   /* raised oracle panel               */
  --night-800: #0e2340;   /* twilight blue — device bg top     */
  --night-700: #142c50;   /* lifted twilight                   */
  --night-600: #153a6b;   /* horizon glow blue                 */
  --void:      #000000;   /* the philosophy black              */

  /* ---- Snow / text whites ---- */
  --snow:      #eef3f8;   /* primary text on dark              */
  --frost:     #e4f4ff;   /* brighter snow for emphasis        */
  --ink-on-ice:#06080b;   /* text that sits ON ice / snow fills */

  /* ---- Ice blue — THE brand hue ---- */
  --ice-100:   #c9e8ff;   /* brightest highlight               */
  --ice-300:   #8cc8ff;   /* core ice blue (Oracle accent)     */
  --ice-500:   #7cd4ff;   /* cyan pop (device accent)          */
  --ice-700:   #4f93d6;   /* deep ice                          */

  /* ---- Powder accents (Snow Scraper, playful) ---- */
  --mint-400:  #6ad6bd;   /* glacier mint                      */
  --mint-600:  #4cc6af;   /* deeper mint                       */
  --pow-gold:  #ffd166;   /* sunny pow pop / big-dump joy      */
  --rose:      #ff8fa3;   /* sunset pink                       */

  /* ---- Snow report semantics (the snowfall scale) ---- */
  --pow-dusting: #8cc8ff;  /* a little                          */
  --pow-good:    #6ad6bd;  /* worth it                          */
  --pow-deep:    #ffd166;  /* powder day (>20cm) — sparkle      */
  --pow-danger:  #ff8fa3;  /* avalanche / caution               */

  /* ---- Hairlines on dark ---- */
  --line:       rgba(238,243,248,.12);
  --line-soft:  rgba(238,243,248,.06);
  --line-strong:rgba(238,243,248,.20);

  /* ============================================================
     SEMANTIC ALIASES — default surface is NIGHT (device).
     Re-scope to .theme-oracle for the near-black Oracle surface.
     ============================================================ */
  --bg-base:        var(--night-900);
  --bg-raised:      #0f1d34;            /* card body on night    */
  --surface-card:   rgba(15,29,52,.80); /* translucent glass     */
  --surface-glass:  rgba(15,29,52,.62);

  --text-primary:   var(--snow);
  --text-secondary: #b6c8db;
  --text-muted:     rgba(238,243,248,.56);
  --text-faint:     rgba(238,243,248,.30);
  --text-link:      var(--ice-500);
  --text-on-accent: var(--ink-on-ice);

  --accent:         var(--ice-500);
  --accent-quiet:   var(--ice-300);
  --accent-deep:    var(--ice-700);
  --accent-2:       var(--mint-400);

  --border:         var(--line);
  --border-strong:  var(--line-strong);
  --focus-ring:     var(--ice-300);
}

/* ============================================================
   THEME · ORACLE — near-black alpine minimal
   Apply on any wrapper: <div class="theme-oracle"> … </div>
   ============================================================ */
.theme-oracle {
  --bg-base:        var(--night-950);
  --bg-raised:      var(--night-850);
  --surface-card:   var(--night-850);
  --surface-glass:  rgba(16,21,28,.82);

  --text-primary:   var(--snow);
  --text-secondary: rgba(238,243,248,.74);
  --text-muted:     rgba(238,243,248,.56);
  --text-faint:     rgba(238,243,248,.30);
  --text-link:      var(--ice-300);
  --text-on-accent: var(--ink-on-ice);

  --accent:         var(--ice-300);
  --accent-quiet:   var(--ice-300);
  --accent-deep:    var(--ice-700);
  --accent-2:       var(--ice-100);

  --border:         var(--line);
  --border-strong:  var(--line-strong);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Snow Scraper — Typography
   Three voices:
   · DISPLAY (Schibsted Grotesk) — big, tight, confident heads
   · UI/BODY (Inter)             — readable interface + prose
   · MONO    (JetBrains Mono)    — eyebrows, data, snowfall stats
   The mono eyebrow (UPPERCASE, wide-tracked, ice-blue) is the
   single most recognizable type signature of the brand.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- Weights ---- */
  --w-regular: 400; /* @kind font */
  --w-medium:  500; /* @kind font */
  --w-semi:    600; /* @kind font */
  --w-bold:    700; /* @kind font */
  --w-black:   800; /* @kind font */
  --w-ultra:   900; /* @kind font */

  /* ---- Display scale (clamped, fluid) ---- */
  --t-mega:    clamp(48px, 9.5vw, 152px); /* @kind font */ /* finale / hero brag */
  --t-display: clamp(40px, 7vw, 108px); /* @kind font */ /* section monument */
  --t-h1:      clamp(36px, 5vw, 68px);  /* @kind font */
  --t-h2:      clamp(28px, 3.4vw, 44px); /* @kind font */
  --t-h3:      clamp(20px, 2vw, 26px); /* @kind font */

  /* ---- Body scale ---- */
  --t-lede:    clamp(18px, 2.1vw, 24px); /* @kind font */ /* intro paragraphs */
  --t-body:    16px; /* @kind font */
  --t-small:   14px; /* @kind font */
  --t-micro:   12px; /* @kind font */

  /* ---- Mono / label scale ---- */
  --t-eyebrow: 12px; /* @kind font */
  --t-data-lg: clamp(28px, 4vw, 46px); /* @kind font */ /* big snowfall number */
  --t-data:    20px; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:  0.94; /* @kind font */ /* display */
  --lh-snug:   1.1; /* @kind font */ /* sub-heads */
  --lh-body:   1.55; /* @kind font */ /* prose */

  /* ---- Tracking ---- */
  --track-display: -0.04em; /* @kind font */ /* big heads pull tight */
  --track-tight:   -0.02em; /* @kind font */
  --track-normal:  -0.01em; /* @kind font */
  --track-eyebrow:  0.28em; /* @kind font */ /* the wide mono eyebrow */
  --track-mono:     0.12em; /* @kind font */
}

/* ---- Optional ready-made type classes (use or ignore) ---- */
.ss-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.ss-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.ss-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
}
.ss-lede {
  font-family: var(--font-ui);
  font-size: var(--t-lede);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.ss-body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.ss-data {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Snow Scraper — Spacing, Radius, Shadow, Layout
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Section rhythm — the big vertical breaths between blocks */
  --section-y:       clamp(80px, 12vh, 180px); /* @kind spacing */
  --section-y-tight: clamp(56px, 8vh, 110px); /* @kind spacing */

  /* Page gutter + max width */
  --gutter:  clamp(22px, 6vw, 96px); /* @kind spacing */
  --maxw:    1280px; /* @kind other */
  --maxw-prose: 64ch; /* @kind other */

  /* ---- Radii ---- */
  --r-xs:   2px;    /* Oracle buttons — crisp, near-square      */
  --r-sm:   8px;
  --r-md:   12px;   /* device chips, icons                       */
  --r-lg:   16px;   /* glass cards                               */
  --r-xl:   22px;   /* alert / notification cards                */
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw:     1px; /* @kind spacing */
  --bw-2:   2px; /* @kind spacing */

  /* ---- Shadows ---- */
  /* device "glass" lift — soft drop + inner top highlight */
  --shadow-glass: 0 20px 50px rgba(0,0,0,.35),
                  inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-card:  0 12px 32px -12px rgba(0,0,0,.5);
  /* the ice glow — used on hover of primary actions + lit elements */
  --shadow-ice:   0 18px 50px -16px rgba(140,200,255,.55);
  --shadow-ice-sm:0 0 20px rgba(140,200,255,.45);
  /* deep float — Oracle phone / device hero */
  --shadow-float: 0 60px 120px -30px rgba(0,0,0,.9);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.2,.7,.2,1); /* @kind other */ /* the house easing */
  --ease-snap:  cubic-bezier(.7,0,.3,1); /* @kind other */
  --dur-fast:   .25s; /* @kind other */
  --dur:        .4s; /* @kind other */
  --dur-slow:   1s; /* @kind other */

  /* ---- Z ---- */
  --z-nav:    80; /* @kind other */
  --z-snow:   60; /* @kind other */
  --z-modal:  1000; /* @kind other */
}