/*
  Ceren Tezel — Design Tokens
  Dil ve Konuşma Terapisti · Web Design System V1
*/

:root{
  /* ---- brand colors — vivid working set ---- */
  --color-primary: #0FA6A0;      /* Vivid Teal — CTAs, accents, energy */
  --color-primary-hover: #0C8983;
  --color-primary-deep: #0E6670; /* Deep Teal — text-on-light, subtle contexts */
  --color-navy: #16232E;         /* Deep Navy — dark surfaces, footer */
  --color-navy-soft: #223345;
  --color-coral: #FF6B4E;        /* Vivid Coral — secondary accent, energy */
  --color-coral-deep: #C6472C;
  --color-gold: #F2A93E;         /* Vivid Gold/Amber — premium warm accent */
  --color-gold-deep: #B87A1E;

  /* ---- gradients ---- */
  --gradient-hero: linear-gradient(135deg, #0FA6A0 0%, #0C8983 45%, #0A5C6B 100%);
  --gradient-coral: linear-gradient(135deg, #FF8A63 0%, #FF6B4E 55%, #E8452E 100%);
  --gradient-gold: linear-gradient(135deg, #FFC169 0%, #F2A93E 60%, #D98A22 100%);
  --gradient-navy: linear-gradient(135deg, #1B2A38 0%, #16232E 55%, #0E6670 130%);

  /* ---- surfaces ---- */
  --color-bg: #FFFFFF;
  --color-bg-warm: #FDF9F3;
  --color-teal-50: #DFF4F2;
  --color-teal-100: #B8E8E4;
  --color-coral-50: #FFE7DE;
  --color-coral-100: #FFC7B4;
  --color-gold-50: #FDF0DA;
  --color-gold-100: #FBDCA3;
  --color-divider: #DCE2E2;

  /* ---- text ---- */
  --color-text: #1F2F3C;
  --color-muted: #68757C;
  --color-on-dark: #FBFAF7;
  --color-on-dark-muted: #AEBAC0;

  /* ---- semantic ---- */
  --color-success: #2E7D66;
  --color-success-bg: #E7F3EE;
  --color-info: #2F6F8F;
  --color-info-bg: #E9F1F5;
  --color-warning: #B7791F;
  --color-warning-bg: #FBF1DF;
  --color-error: #B54747;
  --color-error-bg: #FBECEC;

  /* ---- typography ---- */
  --font-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2rem, 1.5rem + 2.2vw, 4rem);      /* 32 -> 64 */
  --fs-h1: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);         /* 28 -> 48 */
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.5rem);       /* 24 -> 40 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);      /* 20 -> 28 */
  --fs-body-l: 1.125rem;   /* 18 */
  --fs-body: 1rem;         /* 16 */
  --fs-small: 0.875rem;    /* 14 */
  --fs-label: 0.8125rem;   /* 13 */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  /* ---- spacing (8px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

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

  /* ---- shadow ---- */
  --shadow-card: 0 6px 24px rgba(31,47,60,0.08);
  --shadow-hover: 0 10px 30px rgba(31,47,60,0.12);
  --shadow-glow-teal: 0 16px 40px rgba(15,166,160,0.28);
  --shadow-glow-coral: 0 16px 40px rgba(255,107,78,0.28);
  --shadow-glow-gold: 0 16px 40px rgba(242,169,62,0.28);

  /* ---- layout ---- */
  --content-max: 1280px;
  --content-narrow: 760px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-tablet: 32px;
  --margin-mobile: 20px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* ---- header ---- */
  --header-h: 80px;
  --header-h-scrolled: 64px;
}