/* ============================================================
   FISHKOOL — Design Tokens
   Brand system: Royal Blue / Passion Red (extracted from Logo)
   ============================================================ */

:root {
  /* ---------- Brand colors (from FISHKOOL Logo) ---------- */
  --color-primary:        #0066CC;   /* Logo Royal Blue — brand primary */
  --color-primary-hover:  #0052A3;   /* Blue hover state */
  --color-primary-light:  #0080E6;   /* Lighter blue for gradients */
  --color-primary-dark:   #003D7A;   /* Darker blue for depth */

  --color-accent:         #E61B23;   /* Logo Passion Red — CTA */
  --color-accent-hover:   #C4161C;   /* Red hover state */
  --color-accent-soft:    #FDE8E9;   /* Soft red tint for chips/badges */

  /* ---------- Neutral colors ---------- */
  --color-white:          #FFFFFF;
  --color-bg-gray:        #F8F9FA;   /* Cool light gray */
  --color-bg-dark:        #1A1D20;   /* Dark sections / Footer */
  --color-bg-deep:        #121417;   /* Deepest dark areas */
  --color-text:           #212529;
  --color-text-secondary: #6C757D;
  --color-text-muted:     #8A919C;
  --color-text-inverse:   #FFFFFF;
  --color-border:         #E4E7EB;
  --color-border-dark:    rgba(255,255,255,0.14);

  /* ---------- Functional colors (unchanged) ---------- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #1EBE57;
  --color-success:        #1E8E3E;
  --color-error:          #C62828;

  /* ---------- Typography ---------- */
  --font-family: 'Inter', 'Noto Naskh Arabic', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.375rem;  /* 22px */
  --font-size-xl:   1.75rem;   /* 28px */
  --font-size-2xl:  2.25rem;   /* 36px */
  --font-size-3xl:  3rem;      /* 48px */
  --font-size-4xl:  4rem;      /* 64px — hero */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:   1.15;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  --letter-spacing-wide:   0.02em;
  --letter-spacing-wider:  0.05em;
  --letter-spacing-hero:   0.06em;

  /* ---------- Spacing ---------- */
  --space-2xs: 0.25rem;  /* 4px  */
  --space-xs:  0.5rem;   /* 8px  */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 5rem;     /* 80px */
  --space-4xl: 8rem;     /* 128px */

  /* ---------- Layout ---------- */
  --container-max:    1200px;
  --container-narrow: 880px;
  --container-wide:   1400px;
  --header-height:    76px;
  --header-height-mobile: 64px;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* ---------- Shadows (blue-tinted, brand-matched) ---------- */
  --shadow-sm: 0 1px 3px rgba(0, 102, 204, 0.06);
  --shadow-md: 0 6px 20px rgba(0, 102, 204, 0.08);
  --shadow-lg: 0 16px 44px rgba(0, 102, 204, 0.12);
  --shadow-card-hover: 0 12px 32px rgba(0, 102, 204, 0.14);

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;
}