/* ============================================================
   KICKSTART DESIGN SYSTEM TOKENS
   Business Model Intelligence — iterate.kickstartglobal.com
   ============================================================ */

/* Google Fonts are loaded via <link> in layout.html head for CSP compatibility */

:root {
  /* === PRIMARY BRAND COLOUR === */
  --ks-red: #E8001C;
  --ks-red-hover: #C5001A;
  --ks-red-subtle: rgba(232, 0, 28, 0.10);

  /* === NEUTRALS === */
  --ks-dark: #0D0D0D;
  --ks-surface: #161616;
  --ks-surface-elevated: #1F1F1F;
  --ks-border: #2A2A2A;
  --ks-border-strong: #3A3A3A;

  /* === TEXT === */
  --ks-text-primary: #F5F5F5;
  --ks-text-secondary: #A0A0A0;
  --ks-text-inverse: #FFFFFF;

  /* === SEMANTIC === */
  --ks-success: #22C55E;
  --ks-warning: #F59E0B;
  --ks-danger: #EF4444;
  --ks-info: #3B82F6;

  /* === TYPOGRAPHY === */
  --ks-font-display: 'Syne', sans-serif;
  --ks-font-body: 'DM Sans', sans-serif;

  /* ============================================================
     BACKWARDS-COMPAT MAPPING
     Remap all existing --innvenno-* vars to KS tokens.
     Every template/CSS that uses var(--innvenno-green) etc.
     will automatically pick up the new brand colours.
     ============================================================ */
  --innvenno-green: var(--ks-red);
  --innvenno-dark-green: var(--ks-red-hover);
  --innvenno-light-green: rgba(232, 0, 28, 0.6);
  --innvenno-dark: var(--ks-dark);
  --innvenno-bg-dark: var(--ks-surface);
  --innvenno-bg-light: #f8f9fa;
  --innvenno-text-dark: var(--ks-text-primary);
  --innvenno-text-light: var(--ks-text-primary);
}

/* ============================================================
   KS-CHIP COMPONENT
   ============================================================ */
.ks-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--ks-red);
  color: var(--ks-red);
  font-family: var(--ks-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}