/* -----------------------------------------------------
   KAISIGNALS DESIGN SYSTEM — GLOBAL CSS
   ----------------------------------------------------- */

/* ---------- 1. CSS VARIABLES (Design Tokens) ---------- */

:root {
  /* BRAND COLORS — extracted from your swatches */
  --ks-black: #000000;
  --ks-teal-900: #062B31;
  --ks-teal-800: #0D4650;
  --ks-teal-700: #164E61;
  --ks-teal-600: #13747E;
  --ks-teal-500: #41B8C4;
  --ks-teal-100: #79e6dd;
  --ks-grey-200: #d9d9d9;
  --ks-mist: #f5f5f5;
  --ks-ink: #041e24;

  /* CARD LEVEL COLORS — teal muted variants for layered cards */
  --ks-card-level-1: #39676F;
  /* teal-700 muted */
  --ks-card-level-2: #61A2A9;
  /* teal-600 muted */
  --ks-card-level-3: #89D0D8;
  /* teal-500 muted */

  /* BRAND GRADIENT — from your background image */
  --ks-gradient-dark: radial-gradient(circle at center,
      #0D4650 0%,
      #062B31 45%,
      #041E24 100%);

  /* BRAND GRADIENT LINEAR */
  --ks-gradient-linear: linear-gradient(to right,
      var(--ks-teal-900),
      var(--ks-teal-800),
      var(--ks-teal-700),
      var(--ks-teal-600),
      var(--ks-teal-500),
      var(--ks-grey-200));

  /* BRAND GRADIENT LIGHT — for light mode sections */
  --ks-gradient-light: radial-gradient(circle at center,
      var(--ks-grey-200) 0%,
      var(--ks-teal-100) 45%,
      var(--ks-teal-500) 100%);

  /* BRAND GRADIENT SIGNAL — for CTA buttons */
  --ks-gradient-signal: linear-gradient(135deg, #41B8C4 0%, #79e6dd 100%);

  /* TYPOGRAPHY */
  --font-primary: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-secondary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* FONT SIZES */
  --fs-display: 4rem;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.75rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9rem;

  /* FONT WEIGHTS */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* SPACING */
  --space-xxl: 6rem;
  --space-xl: 4rem;
  --space-lg: 2rem;
  --space-md: 1.25rem;
  --space-sm: 0.75rem;
  --space-xs: 0.4rem;

  /* RADIUS */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* SHADOWS */
  --shadow-soft: 0px 12px 28px rgba(0, 0, 0, 0.25);
  --shadow-hard: 0px 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-card-heavy: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);

  /* MAX WIDTHS */
  --container-width: 1320px;
}


/* 
   NOTE: Global styles, resets, and utility classes have been removed 
   to avoid conflicts with Tailwind CSS. This file now serves strictly 
   as the source of truth for Design Tokens (Colors, Fonts, etc.).
*/