/* ============================================================
   ChannelSpikes Design System — Foundations
   Load this file before any other stylesheet.
   ============================================================ */

/* -- Fonts: Geist + Geist Mono via Google Fonts ------------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

/* If self-hosting, drop woff2 files into ./fonts/ and these
   declarations will pick them up first; @import above is the fallback. */
@font-face {
  font-family: 'Geist Local';
  src: local('Geist'), url('./fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ============================================
     COLOR — raw palette
     ============================================ */
  --spike-green:    #00B86B;
  --spike-green-2:  #00A05D;  /* hover / pressed */
  --spike-green-3:  #008A4F;  /* active */
  --spike-tint:     #E6F7EF;  /* subtle green wash */

  --ink:            #0A1220;  /* primary text, dark surface */
  --ink-2:          #14233A;  /* secondary dark surface */
  --steel:          #5B6573;  /* secondary text */
  --steel-2:        #8A92A0;  /* tertiary text, disabled */
  --mist:           #E7EAEE;  /* hairline border */
  --mist-2:         #D6DAE0;  /* stronger border */
  --bone:           #F5F6F8;  /* secondary bg, hover */
  --bone-2:         #ECEEF2;  /* pressed */
  --paper:          #FFFFFF;  /* default bg */

  --amber:          #FFB020;  /* highlights, milestones */
  --amber-tint:     #FFF4DC;
  --crimson:        #E5484D;  /* decline / destructive */
  --crimson-tint:   #FCE9EA;

  /* ============================================
     COLOR — semantic
     ============================================ */
  --bg:             var(--paper);
  --bg-elev:        var(--paper);
  --bg-sunken:      var(--bone);
  --bg-hover:       var(--bone);
  --bg-pressed:     var(--bone-2);

  --fg-1:           var(--ink);     /* primary text */
  --fg-2:           var(--steel);   /* secondary */
  --fg-3:           var(--steel-2); /* tertiary */
  --fg-inverse:     var(--paper);

  --border-1:       var(--mist);
  --border-2:       var(--mist-2);
  --border-strong:  var(--ink);

  --accent:         var(--spike-green);
  --accent-hover:   var(--spike-green-2);
  --accent-press:   var(--spike-green-3);
  --accent-tint:    var(--spike-tint);
  --on-accent:      var(--paper);

  --warn:           var(--amber);
  --warn-tint:      var(--amber-tint);
  --danger:         var(--crimson);
  --danger-tint:    var(--crimson-tint);

  /* Chart-specific */
  --chart-grid:     var(--mist);
  --chart-axis:     var(--steel);
  --chart-baseline: var(--steel-2);
  --chart-spike:    var(--spike-green);
  --chart-decline:  var(--crimson);
  --chart-area:     rgba(0, 184, 107, 0.10);

  /* ============================================
     TYPE — families
     ============================================ */
  --font-sans: 'Geist', 'Geist Local', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;

  /* TYPE — scale (1.250 minor third) */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   30px;
  --t-3xl:   38px;
  --t-4xl:   48px;
  --t-5xl:   60px;
  --t-6xl:   76px;
  --t-7xl:   96px;

  /* TYPE — line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-prose:  1.6;

  /* TYPE — tracking */
  --tk-tightest: -0.04em;
  --tk-tight:    -0.02em;
  --tk-normal:    0em;
  --tk-wide:      0.04em;
  --tk-eyebrow:   0.10em;

  /* TYPE — weight */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ============================================
     SPACING — 4pt
     ============================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ============================================
     RADIUS
     ============================================ */
  --r-0:  0px;
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  999px;

  /* ============================================
     SHADOW
     ============================================ */
  --shadow-1: 0 1px 2px rgba(10, 18, 32, 0.04), 0 1px 1px rgba(10, 18, 32, 0.03);
  --shadow-2: 0 8px 24px rgba(10, 18, 32, 0.08), 0 2px 6px rgba(10, 18, 32, 0.04);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--spike-green);

  /* ============================================
     MOTION
     ============================================ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-1:  80ms;   /* press */
  --dur-2:  120ms;  /* micro */
  --dur-3:  200ms;  /* hover / state change */
  --dur-4:  320ms;  /* panel, menu */
  --dur-5:  600ms;  /* hero / chart draw-in */
  --dur-6:  900ms;  /* spike line first paint */

  /* ============================================
     LAYOUT
     ============================================ */
  --header-h:        56px;   /* app */
  --header-h-marketing: 72px;
  --sidebar-w:       264px;
  --max-w-app:       1280px;
  --max-w-marketing: 1200px;
  --max-w-prose:     720px;
}

/* ============================================
   DARK MODE — same tokens, recoloured
   Apply by adding class="theme-dark" on a wrapper
   or setting [data-theme="dark"] on <html>.
   ============================================ */
[data-theme="dark"], .theme-dark {
  --bg:            var(--ink);
  --bg-elev:       var(--ink-2);
  --bg-sunken:     #050913;
  --bg-hover:      #1A2840;
  --bg-pressed:    #243352;

  --fg-1:          #F2F4F8;
  --fg-2:          #A7AEBC;
  --fg-3:          #7B8497;
  --fg-inverse:    var(--ink);

  --border-1:      #1F2B43;
  --border-2:      #2C3A57;
  --border-strong: #F2F4F8;

  --accent-tint:   rgba(0, 184, 107, 0.16);
  --chart-grid:    #1F2B43;
  --chart-axis:    #7B8497;
  --chart-area:    rgba(0, 184, 107, 0.14);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.3);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-focus: 0 0 0 2px var(--ink), 0 0 0 4px var(--spike-green);
}

/* ============================================
   BASE RESET + ELEMENT DEFAULTS
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}

/* ============================================
   SEMANTIC TYPE — drop-in classes / tags
   ============================================ */
h1, .h1, .display-1 {
  font-family: var(--font-sans);
  font-size: var(--t-6xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-tightest);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--t-4xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-tight);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--t-2xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-tight);
  margin: 0;
}
h4, .h4 {
  font-size: var(--t-xl);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .body {
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.body-sm   { font-size: var(--t-sm); line-height: var(--lh-normal); }
.body-lg   { font-size: var(--t-md); line-height: var(--lh-prose); }
.lead      { font-size: var(--t-lg); line-height: var(--lh-prose); color: var(--fg-2); text-wrap: pretty; }
.muted     { color: var(--fg-2); }
.subtle    { color: var(--fg-3); }

.eyebrow {
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.num, .mono, code, kbd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.num-display {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: var(--tk-tight);
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--space-7) 0;
}

::selection { background: var(--accent-tint); color: var(--ink); }

/* ============================================
   FOCUS — visible always
   ============================================ */
:focus-visible {
  outline: 2px solid var(--spike-green);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ============================================
   UTILITY — spike line marker, used inline
   ============================================ */
.spike-mark {
  display: inline-block;
  width: 1.1em;
  height: 1em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'><path d='M1 18 L5 17 L9 16 L13 15 L13 4 L17 14 L21 13' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'><path d='M1 18 L5 17 L9 16 L13 15 L13 4 L17 14 L21 13' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}