/* ============================================================
   Showmate — Colors & Type tokens
   ------------------------------------------------------------
   The brand runs dark by default: jet-black canvas, a single
   high-voltage green for action, and a tight neutral ramp for
   surfaces / borders / type. Type pairs Space Grotesk (display,
   tabular, label) with Inter (UI + body).
   ============================================================ */

/* ---------- Fonts (Google Fonts; see README — local TTFs not provided) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* =========================================================
     COLOR — Brand
     ========================================================= */
  --brand-green:        #32FF41;   /* logo / primary signal */
  --brand-green-hi:     #4FF15A;   /* primary button fill, active sidebar */
  --brand-green-text:   #0BD942;   /* deeper green, used on dark for links/labels */
  --brand-green-press:  #1FBA3D;   /* pressed / darker hover */
  --brand-green-soft:   rgba(50, 255, 65, 0.12); /* tint wash, focus ring background */
  --brand-green-glow:   0 0 24px rgba(50, 255, 65, 0.35);

  /* =========================================================
     COLOR — Neutrals (dark canvas system)
     ========================================================= */
  --bg-0:   #000000;   /* page canvas */
  --bg-1:   #0A0A0A;   /* sidebar / nav */
  --bg-2:   #121212;   /* card surface */
  --bg-3:   #1A1A1A;   /* raised card / hover */
  --bg-4:   #242424;   /* input / chip */

  --line-1: #1F1F1F;   /* hairline divider */
  --line-2: #2A2A2A;   /* border on dark surface */
  --line-3: #3A3A3A;   /* strong border / focus */

  --fg-1:   #FFFFFF;   /* primary text */
  --fg-2:   #B8B8B8;   /* secondary text / icon */
  --fg-3:   #8A8A8A;   /* tertiary, meta */
  --fg-4:   #5C5C5C;   /* disabled / placeholder */

  --on-brand: #001A06; /* text on brand-green fill (near-black, slight green tint) */

  /* =========================================================
     COLOR — Semantic (status / data viz)
     ========================================================= */
  --success: #4FF15A;
  --warning: #FFB020;
  --danger:  #FF4D4F;
  --info:    #4DA3FF;

  /* Order/show status pills */
  --status-tagged:   var(--brand-green-hi);
  --status-pending:  #FFB020;
  --status-shipped:  #4DA3FF;
  --status-flagged:  #FF4D4F;

  /* =========================================================
     RADIUS
     ========================================================= */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* =========================================================
     SHADOW & ELEVATION
     ========================================================= */
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 0 1px var(--brand-green-hi), 0 0 24px rgba(79,241,90,0.35);

  /* =========================================================
     SPACING (4-pt scale)
     ========================================================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* =========================================================
     TYPE — Families
     ========================================================= */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPE — Scale (semantic + raw)
     ========================================================= */
  --t-display-1: 700 56px/1.02 var(--font-display);
  --t-display-2: 700 44px/1.05 var(--font-display);
  --t-h1:        700 32px/1.15 var(--font-display);
  --t-h2:        700 24px/1.2  var(--font-display);
  --t-h3:        600 18px/1.3  var(--font-display);
  --t-body:      400 15px/1.5  var(--font-ui);
  --t-body-sm:   400 13px/1.5  var(--font-ui);
  --t-label:     600 13px/1.2  var(--font-ui);
  --t-overline:  600 11px/1.2  var(--font-ui);   /* uppercase, tracked */
  --t-mono:      500 13px/1.4  var(--font-mono);
  --t-tabular:   600 15px/1.2  var(--font-mono); /* counts, IDs, SKUs */

  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em;

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-in:  cubic-bezier(.7,.0,.8,.3); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}

/* ============================================================
   Semantic element bindings — apply these to native tags
   when you want default Showmate styling.
   ============================================================ */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font: var(--t-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--t-h1); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: var(--t-h2); letter-spacing: var(--tracking-tight); margin: 0; }
h3 { font: var(--t-h3); margin: 0; }
p  { font: var(--t-body); color: var(--fg-2); margin: 0; }

code, kbd, samp {
  font: var(--t-mono);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

.overline {
  font: var(--t-overline);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.tabular {
  font: var(--t-tabular);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}