/* ==========================================================
   Silakab — CSS Custom Properties (Design Tokens)
   ========================================================== */

:root {
  /* ── Primary Colors ── */
  --color-primary: #00A5EB;
  --color-secondary: #F2008E;
  --color-tertiary: #673993;
  --color-black: #000000;

  /* ── Extended Palette ── */
  --color-white: #FFFFFF;
  --color-off-white: #F5F7FA;
  --color-dark-surface: #0D0D1A;
  --color-muted-light: #B0B8C4;   /* body text on dark bg */
  --color-muted-dark: #4A4A5A;    /* body text on light bg */

  /* ── Gradients ── */
  --gradient-brand: linear-gradient(135deg, #00A5EB, #673993, #F2008E);
  --gradient-glow: radial-gradient(circle, rgba(0,165,235,0.3), rgba(242,0,142,0.1), transparent);
  --gradient-subtle: linear-gradient(135deg, rgba(0,165,235,0.08), rgba(242,0,142,0.08));
  --gradient-line: linear-gradient(90deg, transparent, #00A5EB, #F2008E, transparent);

  /* ── Typography ── */
  --font-heading: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Desktop sizes */
  --text-h1: 3.5rem;       /* 56px */
  --text-h2: 2.5rem;       /* 40px */
  --text-h3: 1.75rem;      /* 28px */
  --text-h4: 1.25rem;      /* 20px */
  --text-body-lg: 1.125rem;/* 18px */
  --text-body: 1rem;        /* 16px */
  --text-body-sm: 0.875rem;/* 14px */
  --text-caption: 0.75rem;  /* 12px */

  /* Line heights */
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-h4: 1.4;
  --lh-body: 1.7;
  --lh-caption: 1.5;

  /* Letter spacing */
  --ls-h1: -0.02em;
  --ls-h2: -0.01em;
  --ls-caption: 0.05em;

  /* ── Spacing Scale (8px base) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* ── Layout ── */
  --max-width: 1200px;
  --max-text-width: 720px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-gutter-mobile: 16px;

  /* ── Borders & Radius ── */
  --radius-sm: 8px;
  --radius-lg: 16px;
  --border-card-dark: 1px solid rgba(255, 255, 255, 0.06);
  --border-card-light: 1px solid #E8E8EE;

  /* ── Shadows ── */
  --shadow-card-light: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-glow-primary: 0 0 20px rgba(0, 165, 235, 0.4);
  --shadow-glow-accent: 0 0 20px rgba(242, 0, 142, 0.3);

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 300ms;
  --duration-reveal: 700ms;

  /* ── Breakpoints (for reference; used via media queries) ── */
  /* Mobile:  < 640px   */
  /* Tablet:  640–1024px */
  /* Desktop: > 1024px  */
  /* Wide:    > 1440px  */
}