/* ==========================================================================
   Kelarix Design Tokens
   Generated from design-tokens.tokens.json (Figma export).
   NOTE: In the Figma file the accent scale is named "muted pink" but the
   actual values are blue/indigo — that is the real brand accent.
   ========================================================================== */

:root {
  /* ---- Font family ---- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Font weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Type scale (font-size / line-height in px from JSON) ---- */
  --fs-note: 8px;          --lh-note: 9.6px;
  --fs-description: 12px;  --lh-description: 14.4px;
  --fs-body: 14px;         --lh-body: 16.8px;
  --fs-title: 16px;        --lh-title: 24px;
  --fs-h5: 20px;           --lh-h5: 32px;
  --fs-h4: 24px;           --lh-h4: 28.8px;
  --fs-h3: 32px;           --lh-h3: 38.4px;
  --fs-h2: 40px;           --lh-h2: 48px;
  --fs-h1: 60px;           --lh-h1: 72px;

  /* ---- Spacing scale ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-256: 256px;

  /* ---- Primitive: accent (named "muted pink", actually blue/indigo) ---- */
  --accent-100: #c8caff;
  --accent-200: #a0a8ff;
  --accent-300: #7485ff;
  --accent-400: #4e67ff;
  --accent-500: #1a48ff;
  --accent-600: #143ef3;
  --accent-700: #0032e6;
  --accent-800: #0024db;
  --accent-900: #0000cc;

  /* ---- Primitive: cool blue gray (neutral) ---- */
  --gray-100: #f3f3f3;
  --gray-200: #eaeaea;
  --gray-300: #dbdbdb;
  --gray-400: #b7b7b7;
  --gray-500: #989898;
  --gray-600: #6f6f6f;
  --gray-700: #5c5c5c;
  --gray-800: #3d3d3d;
  --gray-900: #1d1d1d;

  /* ---- Primitive: blue ---- */
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;

  /* ---- Status ---- */
  --green-500: #22c55e;
  --red-500: #ef4444;
  --yellow-500: #eab308;

  /* ---- Base ---- */
  --white: #fefefe;
  --black: #1e1e1e;
  --gray: #f5f5f5;

  /* ---- Semantic tokens ---- */
  --color-text: var(--black);
  --color-text-muted: var(--gray-700);
  --color-text-on-dark: var(--white);
  --color-text-on-dark-muted: #c8caff;

  --color-bg: var(--white);
  --color-bg-alt: var(--gray);

  /* Dark sections use a deep indigo gradient drawn from the accent ramp */
  --color-dark-1: #050a33;
  --color-dark-2: #0a1559;
  --color-dark-3: #122a9e;
  --gradient-dark: linear-gradient(160deg, #0a1559 0%, #122a9e 55%, #1a48ff 120%);
  --gradient-accent: linear-gradient(135deg, var(--accent-600), var(--accent-500));

  --color-btn-primary: var(--accent-500);
  --color-btn-primary-hover: var(--accent-400);
  --color-btn-primary-focus: var(--accent-900);
  --color-btn-secondary: var(--gray-700);

  --color-border: var(--gray-200);
  --color-border-accent: var(--accent-500);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (from JSON effects) ---- */
  --shadow-extra-soft: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 6px 32px rgba(0, 0, 0, 0.2);
  --shadow-up: 0 -4px 32px rgba(0, 0, 0, 0.25);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
  --grid-gutter: 20px;
}

@media (max-width: 1024px) {
  :root {
    --fs-h1: 44px;  --lh-h1: 52px;
    --fs-h2: 32px;  --lh-h2: 40px;
    --fs-h3: 26px;  --lh-h3: 32px;
    --container-pad: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 32px;  --lh-h1: 40px;
    --fs-h2: 26px;  --lh-h2: 32px;
    --fs-h3: 22px;  --lh-h3: 28px;
    --fs-h4: 20px;  --lh-h4: 26px;
    --container-pad: 16px;
  }
}