/* ============================================================
   BebekSünneti DS v2 — Aksiyon System Design Tokens
   ============================================================ */

:root {
  /* ── PRIMITIVE PALETTE ────────────────────────────── */
  --ink-950: #0A1622;
  --ink-900: #0F1D2E;
  --ink-800: #142433;
  --ink-700: #1C3043;
  --ink-600: #2A3D52;
  --ink-500: #3D556D;

  --paper-50:  #FBF8F3;
  --paper-100: #F4EFE7;
  --paper-200: #E8E0D2;
  --paper-300: #D5CBBA;

  --mist-50:  #EEF2F4;
  --mist-100: #DCE4E8;
  --mist-200: #B9C5CC;
  --mist-300: #96A6B0;

  --teal-800: #094D4A;
  --teal-700: #0E5C5A;
  --teal-600: #15736F;
  --teal-500: #2B8A86;
  --teal-400: #4AABA6;
  --teal-100: #D4EDEB;

  --amber-800: #7A4210;
  --amber-700: #93501A;
  --amber-600: #B5651D;
  --amber-500: #CC7A2E;
  --amber-400: #E09545;
  --amber-100: #F5E6D3;
  --amber-50:  #FBF3EA;

  --sage-700: #2F6B53;
  --sage-500: #3E8E6E;
  --sage-100: #DDEAE2;

  --rose-700: #8C3A30;
  --rose-500: #B04C40;
  --rose-100: #F1DEDC;

  /* ── SEMANTIC SURFACES ────────────────────────────── */
  --surface-paper:   var(--paper-50);
  --surface-paper-2: var(--paper-100);
  --surface-mist:    var(--mist-50);
  --surface-mist-2:  var(--mist-100);
  --surface-night:   var(--ink-950);
  --surface-night-2: var(--ink-800);

  /* ── SEMANTIC TEXT ────────────────────────────────── */
  --text-primary:      #1A2230;
  --text-secondary:    #4B5868;
  --text-muted:        #7A8492;
  --text-on-night:     #ECE4D6;
  --text-on-night-sec: #9BA8B8;
  --text-on-night-mut: #6B7A8E;

  /* ── SEMANTIC ACCENT / FUNCTIONAL ─────────────────── */
  --accent:       var(--amber-600);
  --accent-hover: var(--amber-700);
  --accent-soft:  var(--amber-100);
  --accent-50:    var(--amber-50);
  --anchor:       var(--teal-700);
  --anchor-hover: var(--teal-800);
  --link:         var(--teal-500);
  --link-light:   var(--teal-400);

  --positive:      var(--sage-700);
  --positive-soft: var(--sage-100);
  --warning:       var(--rose-700);
  --warning-soft:  var(--rose-100);

  /* ── BORDERS ──────────────────────────────────────── */
  --border-soft:      rgba(20, 36, 51, 0.08);
  --border-on-paper:  var(--paper-200);
  --border-on-mist:   var(--mist-200);
  --border-on-night:  rgba(236, 228, 214, 0.10);
  --border-on-night-2:rgba(236, 228, 214, 0.06);

  /* ── TYPOGRAPHY ───────────────────────────────────── */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-sans:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --t-display: clamp(2.4rem, 4.2vw + 1rem, 4.4rem);
  --t-h1:      clamp(2.0rem, 2.8vw + 1rem, 3.2rem);
  --t-h2:      clamp(1.55rem, 1.4vw + 1rem, 2.15rem);
  --t-h3:      clamp(1.2rem, 0.6vw + 1rem, 1.45rem);
  --t-lead:    clamp(1.05rem, 0.3vw + 0.95rem, 1.2rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-xs:      0.75rem;

  --lh-display: 1.12;
  --lh-heading: 1.25;
  --lh-body:    1.65;
  --lh-small:   1.55;

  /* ── SPACING ──────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  --section-y-sm: clamp(48px, 6vw, 80px);
  --section-y:    clamp(72px, 8vw, 128px);
  --section-y-lg: clamp(96px, 10vw, 160px);

  /* ── CONTAINER ────────────────────────────────────── */
  --container-narrow: 720px;
  --container:        1180px;
  --container-wide:   1320px;
  --gutter:           clamp(16px, 3vw, 32px);

  /* ── RADIUS ───────────────────────────────────────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-5: 32px;
  --r-pill: 999px;

  /* ── SHADOWS ──────────────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(20,36,51,0.04), 0 1px 2px rgba(20,36,51,0.04);
  --shadow-2: 0 1px 0 rgba(20,36,51,0.04), 0 8px 24px -12px rgba(20,36,51,0.10);
  --shadow-3: 0 1px 0 rgba(20,36,51,0.05), 0 24px 48px -24px rgba(20,36,51,0.18);
  --shadow-night: 0 1px 0 rgba(255,255,255,0.04), 0 24px 64px -16px rgba(0,0,0,0.6);

  /* ── TRANSITIONS ──────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}