/* ============================================================
   YOLHESABI.COM — Design Tokens
   variables.css  |  Aydınlık & Koyu Mod Desteği
   ============================================================ */

:root {
  /* ── Brand Palette ───────────────────────────────────────── */
  --clr-primary-50:  #dae2ff;
  --clr-primary-100: #b2c5ff;
  --clr-primary-200: #7ca0ff;
  --clr-primary-400: #3a68ef;
  --clr-primary-600: #0c45c8;
  --clr-primary-800: #003180;
  --clr-primary-900: #001848;

  --clr-secondary-50:  #8df7c1;
  --clr-secondary-100: #5edba6;
  --clr-secondary-400: #1fb87a;
  --clr-secondary-600: #006c47;
  --clr-secondary-800: #003d28;

  --clr-tertiary-50:   #ffdcc3;
  --clr-tertiary-400:  #e8853a;
  --clr-tertiary-600:  #562b00;
  --clr-tertiary-800:  #2f1500;

  --clr-error-50:  #ffdad6;
  --clr-error-600: #ba1a1a;

  /* ── Neutrals (Light mode) ───────────────────────────────── */
  --surface:                  #faf8ff;
  --surface-bright:           #faf8ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #f3f3fc;
  --surface-container:        #ededf6;
  --surface-container-high:   #e7e7f0;
  --surface-container-highest:#e2e2eb;
  --surface-dim:              #d9d9e2;
  --surface-variant:          #e2e2eb;

  --on-surface:               #191b22;
  --on-surface-variant:       #434653;
  --outline:                  #737784;
  --outline-variant:          #c3c6d5;

  /* ── Semantic ────────────────────────────────────────────── */
  --primary:             var(--clr-primary-800);
  --on-primary:          #ffffff;
  --primary-container:   #0046b0;
  --on-primary-container:var(--clr-primary-100);
  --primary-fixed:       var(--clr-primary-50);

  --secondary:             var(--clr-secondary-600);
  --on-secondary:          #ffffff;
  --secondary-container:   var(--clr-secondary-50);
  --on-secondary-container:var(--clr-secondary-600);

  --tertiary:             var(--clr-tertiary-600);
  --on-tertiary:          #ffffff;
  --tertiary-container:   #783e00;
  --on-tertiary-container:var(--clr-tertiary-50);

  --error:          var(--clr-error-600);
  --error-container:var(--clr-error-50);

  --background:    #faf8ff;
  --on-background: #191b22;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', 'Manrope', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.75rem;   /* 12px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:  0.5rem;    /* 8px */
  --radius-md:  0.75rem;   /* 12px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.5rem;    /* 24px */
  --radius-2xl: 2rem;      /* 32px */
  --radius-full:9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(25,27,34,0.06);
  --shadow-sm: 0 4px 12px rgba(25,27,34,0.06);
  --shadow-md: 0 8px 24px rgba(25,27,34,0.08);
  --shadow-lg: 0 16px 48px rgba(25,27,34,0.10);
  --shadow-xl: 0 24px 64px rgba(25,27,34,0.14);

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-dropdown:20;
  --z-sticky:  30;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;
  --z-top:     70;

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  /* ── Header & Nav Heights ────────────────────────────────── */
  --header-h: 64px;
  --nav-h:    72px;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --surface:                  #111318;
  --surface-bright:           #37393e;
  --surface-container-lowest: #0d0e13;
  --surface-container-low:    #191b22;
  --surface-container:        #1d2026;
  --surface-container-high:   #272a31;
  --surface-container-highest:#31343c;
  --surface-dim:              #111318;
  --surface-variant:          #434653;

  --on-surface:               #e2e2eb;
  --on-surface-variant:       #c3c6d5;
  --outline:                  #8d9099;
  --outline-variant:          #434653;

  --primary:             var(--clr-primary-100);
  --on-primary:          var(--clr-primary-900);
  --primary-container:   #0040a2;
  --on-primary-container:var(--clr-primary-50);
  --primary-fixed:       #1a3a70;

  --secondary:             var(--clr-secondary-100);
  --on-secondary:          var(--clr-secondary-800);
  --secondary-container:   #004d33;
  --on-secondary-container:#8df7c1;

  --tertiary:             var(--clr-tertiary-50);
  --on-tertiary:          var(--clr-tertiary-800);
  --tertiary-container:   #783e00;
  --on-tertiary-container:#ffdcc3;

  --background:    #111318;
  --on-background: #e2e2eb;

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.30);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.36);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.42);
}