/* ==========================================================================
   Foren Technology — Design Tokens
   Kaynak: Forentech brief — renk sistemi, tipografi, hareket kuralları
   Kullanım: tüm sayfalarda main.css'ten ÖNCE yüklenir.
   Tema: html[data-theme="dark"] (varsayılan) / html[data-theme="light"]
   ========================================================================== */

:root {
  /* ---- Marka sabitleri (temadan bağımsız) ---- */
  --frn-navy-deep: #081A32;
  --frn-navy-night: #050F1E;
  --frn-surface-dark: #0D213C;
  --frn-red: #D92D45;
  --frn-red-active: #F0445C;
  --frn-light-bg: #F7F8FA;
  --frn-text-dark: #0B1B31;
  --frn-text-light: #F2F5F9;
  --frn-slate: #9EAFC4;

  /* ---- Tipografi ---- */
  --font-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px — mono etiketler */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.375rem;    /* 22px */
  --text-xl: 1.75rem;     /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: clamp(2.5rem, 5vw, 3.75rem);   /* bölüm başlıkları */
  --text-hero: clamp(2.75rem, 6.5vw, 5rem);  /* hero başlığı */

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.65;

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

  /* ---- Spacing ölçeği (4px taban) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Radius (kontrollü — "her yerde yuvarlatılmış SaaS kartı" yasak) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

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

  /* ---- Hareket ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 800ms;

  /* ---- Z katmanları ---- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-nav: 120;
}

/* ==========================================================================
   DARK tema (varsayılan — sinematik lacivert marka ortamı)
   ========================================================================== */
:root,
html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--frn-navy-night);
  --color-bg-raised: var(--frn-navy-deep);
  --color-surface: var(--frn-surface-dark);
  --color-surface-alt: #0A1A30;
  --color-border: rgba(158, 175, 196, 0.16);
  --color-border-strong: rgba(158, 175, 196, 0.32);

  --color-text: var(--frn-text-light);
  --color-text-secondary: var(--frn-slate);
  --color-text-heading: #FFFFFF;

  --color-accent: var(--frn-red);
  --color-accent-active: var(--frn-red-active);
  /* Koyu zeminde metin-kırmızısı (kicker, link, aktif durum metinleri) */
  --color-accent-text: var(--frn-red-active);
  --color-accent-contrast: #FFFFFF;
  --color-accent-soft: rgba(217, 45, 69, 0.12);

  /* Header — opak yüzey (backdrop blur YOK, brief glassmorphism yasağı) */
  --color-header-bg: var(--frn-navy-night);
  --color-header-border: rgba(158, 175, 196, 0.14);

  /* Form */
  --color-field-bg: rgba(13, 33, 60, 0.6);
  --color-field-border: rgba(158, 175, 196, 0.28);

  /* Diyagram / sahne tonları */
  --color-diagram-line: rgba(158, 175, 196, 0.35);
  --color-diagram-node: #12294A;
  --color-signal: var(--frn-red-active);

  --shadow-elev: 0 18px 48px rgba(2, 8, 18, 0.5);
}

/* ==========================================================================
   LIGHT tema — aynı tasarım sisteminin doğal parçası
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;

  --color-bg: var(--frn-light-bg);
  --color-bg-raised: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EEF1F5;
  --color-border: rgba(11, 27, 49, 0.12);
  --color-border-strong: rgba(11, 27, 49, 0.28);

  --color-text: #23364F;
  --color-text-secondary: #54687F;
  --color-text-heading: var(--frn-text-dark);

  --color-accent: var(--frn-red);
  --color-accent-active: var(--frn-red-active);
  /* Açık zeminde metin-kırmızısı — AA 4.5+ için koyultulmuş (#F0445C 4.48 idi).
     Yalnız metin rengi; CTA zeminleri (--color-accent*) değişmez. */
  --color-accent-text: #C22540;
  --color-accent-contrast: #FFFFFF;
  --color-accent-soft: rgba(217, 45, 69, 0.08);

  --color-header-bg: var(--frn-light-bg);
  --color-header-border: rgba(11, 27, 49, 0.1);

  --color-field-bg: #FFFFFF;
  --color-field-border: rgba(11, 27, 49, 0.22);

  --color-diagram-line: rgba(11, 27, 49, 0.3);
  --color-diagram-node: #E4E9F0;
  --color-signal: var(--frn-red);

  /* Light temada sinematik sahneler (hero vb.) lacivert kalır */
  --shadow-elev: 0 18px 48px rgba(11, 27, 49, 0.12);
}