/* =============================================================
   vars.css — SEALIFY DESIGN TOKENS
   Bu dosyayı değiştir → tüm site değişir.
   ============================================================= */

:root {
  /* ── Typography ── */
  --font:           -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;

  --size-xs:        11px;
  --size-sm:        13px;
  --size-base:      15px;
  --size-md:        17px;
  --size-lg:        20px;

  --nav-link-size:  14px;
  --nav-link-weight:500;

  /* H1 — tüm sayfalarda aynı */
  --h1-size:        clamp(32px, 4.5vw, 52px);
  --h1-weight:      500;
  --h1-line:        1.1;

  /* H2 */
  --h2-size:        clamp(22px, 3vw, 36px);
  --h2-weight:      500;

  /* ── Spacing ── */
  --space-xs:       8px;
  --space-sm:       16px;
  --space-md:       24px;
  --space-lg:       48px;
  --space-xl:       80px;

  --page-pad-x:     clamp(16px, 5vw, 80px);
  --content-max:    1120px;
  --nav-height:     64px;

  /* ── Radius ── */
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-pill:    999px;

  /* ── Transitions ── */
  --transition:     0.2s ease;
  --transition-slow:0.35s ease;

  /* ── Z-index ── */
  --z-nav:          100;
  --z-mobile-menu:  99;
  --z-modal:        9999;
}

/* ────────────────────────────────────────────────────────────
   DARK THEME (default)
──────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --bg:             #100f0b;
  --bg-2:           #171612;
  --bg-card:        rgba(255, 255, 255, 0.03);
  --bg-card-hover:  rgba(255, 255, 255, 0.06);

  --text:           #f4f1ea;
  --text-muted:     rgba(244, 241, 234, 0.55);
  --text-faint:     rgba(244, 241, 234, 0.30);

  --border:         rgba(244, 241, 234, 0.08);
  --border-hover:   rgba(244, 241, 234, 0.16);

  --btn-primary-bg: #f4f1ea;
  --btn-primary-text:#15130f;
  --btn-secondary-bg:rgba(244, 241, 234, 0.07);
  --btn-secondary-border:rgba(244, 241, 234, 0.14);
  --btn-secondary-text:#f4f1ea;

  --nav-bg:         transparent;
  --nav-bg-scrolled:#100f0b;

  --mobile-menu-bg: #0d0c09;

  --modal-bg:       #111110;
  --modal-border:   rgba(244, 241, 234, 0.1);
  --input-bg:       rgba(255, 255, 255, 0.05);
  --input-border:   rgba(244, 241, 234, 0.12);
  --input-focus:    rgba(244, 241, 234, 0.3);

  --accent:         #4ecdc4;
  --accent-dim:     rgba(78, 205, 196, 0.15);

  --shadow:         0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.6);

  --theme-icon-sun: block;
  --theme-icon-moon:none;
}

/* ────────────────────────────────────────────────────────────
   LIGHT THEME
──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:             #f4f1ea;
  --bg-2:           #ede9e0;
  --bg-card:        rgba(21, 19, 15, 0.04);
  --bg-card-hover:  rgba(21, 19, 15, 0.07);

  --text:           #15130f;
  --text-muted:     rgba(21, 19, 15, 0.55);
  --text-faint:     rgba(21, 19, 15, 0.30);

  --border:         rgba(21, 19, 15, 0.1);
  --border-hover:   rgba(21, 19, 15, 0.2);

  --btn-primary-bg: #15130f;
  --btn-primary-text:#f4f1ea;
  --btn-secondary-bg:rgba(21, 19, 15, 0.06);
  --btn-secondary-border:rgba(21, 19, 15, 0.14);
  --btn-secondary-text:#15130f;

  --nav-bg:         transparent;
  --nav-bg-scrolled:#f4f1ea;

  --mobile-menu-bg: #ede9e0;

  --modal-bg:       #f0ece4;
  --modal-border:   rgba(21, 19, 15, 0.1);
  --input-bg:       rgba(21, 19, 15, 0.05);
  --input-border:   rgba(21, 19, 15, 0.15);
  --input-focus:    rgba(21, 19, 15, 0.35);

  --accent:         #0d9488;
  --accent-dim:     rgba(13, 148, 136, 0.12);

  --shadow:         0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.15);

  --theme-icon-sun: none;
  --theme-icon-moon:block;
}