/**
 * AssurePort Sentinel Edge — Global Design Tokens
 * v1.0 (2026-05-28) — Initial token system, Patron direktifi.
 *
 * STRATEJİ:
 * - Tek kaynak truth (single source of truth)
 * - MSSP white-label: partner sadece bu dosyayı override eder
 * - WCAG AA:
 *   - --primary üstüne beyaz: 3.93:1 (UI component, 1.4.11, 3:1 yeterli ✓)
 *   - --text-2 #B8C2D6 üstüne --surface: ~5.1:1 (body text ✓)
 *   - --muted #8B95AB üstüne --bg: ~4.6:1 (caption/footer ✓)
 * - Mor brand vs kırmızı critical: ayrı tokenler, brand-vs-finding ayrımı net
 *
 * GELECEK:
 * - Google Fonts self-host (GDPR uyumu için — şu an Google sunucusuna istek gidiyor,
 *   AB kullanıcı IP'si Google'a iletiliyor. Sprint scope dışı, ileride self-host edilecek.)
 * - data-theme="light" PDF export'ta toggle (runner/pdf-export.ts)
 * - Per-page :root override yerine bu dosya yetmeli
 */

/* ============================================================
   GOOGLE FONTS — Sentinel Edge font stack
   NOT: GDPR riski mevcut (IP Google'a gidiyor). Self-host
   ileride yapılacak. Bu sprint kapsam dışı.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap&subset=latin-ext');

/* ============================================================
   DARK MODE — Default (:root)
   ============================================================ */
:root {

  /* === Surfaces === */
  --bg:              #0A0E1A;
  --surface:         #131A2E;
  --elevated:        #1B2440;
  --border:          #1F2940;
  --border-strong:   #2C3754;

  /* === Brand === */
  --primary:         #7C5CFF;
  --primary-2:       #9C82FF;   /* gradient için lighter variant */
  --primary-hover:   #6A4CE0;   /* %10 darker, btn hover */
  --secondary:       #22D3EE;

  /* === Semantik (severity) === */
  --critical:        #F43F5E;
  --high:            #FB7185;
  --medium:          #F59E0B;
  --low:             #FACC15;
  --safe:            #10B981;
  --info:            #38BDF8;

  /* === Text === */
  --text:            #F4F6FB;
  --text-2:          #B8C2D6;  /* WCAG AA: on surface = ~5.1:1 ✓ */
  --muted:           #8B95AB;  /* WCAG AA: on bg = ~4.6:1 ✓ */

  /* === Layout === */
  --radius:          14px;
  --radius-sm:       10px;
  --radius-lg:       20px;

  /* === Typography === */
  --font-sans:       'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* === Font Sizes (type scale, 1.25 Major Third) === */
  --text-xs:         11px;
  --text-sm:         13px;
  --text-base:       15px;
  --text-md:         17px;
  --text-lg:         20px;
  --text-xl:         24px;
  --text-2xl:        32px;
  --text-3xl:        40px;
  --text-4xl:        52px;
  --text-hero:       60px;

  /* === Spacing (4px grid) === */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-16:        64px;
  --space-20:        80px;

  /* === Layout === */
  --container-max:   1200px;
  --container-pad:   28px;

  /* === Gradients (mockup body bg pattern) === */
  --gradient-body:
    radial-gradient(1100px 600px at 80% -10%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(34,211,238,.10), transparent 60%);
  --gradient-cta:    linear-gradient(180deg, var(--primary-2), var(--primary));
  --gradient-accent: linear-gradient(120deg, var(--primary-2), var(--secondary));
  --gradient-surface: linear-gradient(180deg, var(--surface), #0F1528);

  /* === Shadows === */
  --shadow-card:     0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(124,92,255,.08);
  --shadow-cta:      0 8px 24px -8px rgba(124,92,255,.6), inset 0 1px 0 rgba(255,255,255,.2);
  --shadow-glow:     0 0 30px rgba(124,92,255,.4);
  --shadow-sm:       0 2px 8px rgba(0,0,0,.3);
  --shadow-md:       0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:       0 24px 64px rgba(0,0,0,.5);

  /* === Animation Timing === */
  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   300ms;
  --duration-xslow:  500ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

  /* === Z-Index Scale === */
  --z-below:         -1;
  --z-base:          0;
  --z-raised:        10;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-overlay:       300;
  --z-modal:         400;
  --z-toast:         500;
  --z-tooltip:       600;

  /* === Severity Background Alphas (badge fill) === */
  --critical-bg:     rgba(244,63,94,.16);
  --high-bg:         rgba(251,113,133,.14);
  --medium-bg:       rgba(245,158,11,.16);
  --low-bg:          rgba(250,204,21,.14);
  --safe-bg:         rgba(16,185,129,.14);
  --info-bg:         rgba(56,189,248,.14);

  /* === Severity Border Alphas === */
  --critical-border: rgba(244,63,94,.28);
  --high-border:     rgba(251,113,133,.24);
  --medium-border:   rgba(245,158,11,.28);
  --low-border:      rgba(250,204,21,.24);
  --safe-border:     rgba(16,185,129,.25);
  --info-border:     rgba(56,189,248,.24);

  /* === Icon Container (feature card ikon bg) === */
  --icon-bg:         linear-gradient(180deg, rgba(124,92,255,.18), rgba(124,92,255,.04));
  --icon-border:     rgba(124,92,255,.25);

  /* === Transition shorthand === */
  --transition-base: all var(--duration-base) var(--ease-in-out);

  /* ── Backward compat alias'lar (Faz A.1 hotfix) ───────────────────
     marketing.html ve gdpr-notice.html'de hala --surface-2 / --text-3
     referansları var. Token sistemi yeni isimlere geçtiği için bu eski
     isimleri alias olarak tutuyoruz. Faz A2'de bu kullanımlar `--elevated`
     ve `--muted`'a migrate edilecek, alias'lar kaldırılacak. */
  --surface-2: var(--elevated);
  --text-3:    var(--muted);
}

/* ============================================================
   LIGHT MODE — PDF + rapor export
   data-theme="light" selector (runner/pdf-export.ts toggle eder)
   ============================================================ */
[data-theme="light"] {
  --bg:              #F7F8FB;
  --surface:         #FFFFFF;
  --elevated:        #FFFFFF;
  --border:          #E4E7EE;
  --border-strong:   #CBD2DE;
  --text:            #0A0E1A;
  --text-2:          #4A5468;
  --muted:           #6B7388;

  /* Brand + semantic tokenler dark mode ile aynı kalır */

  /* PDF severity kontrast fix — beyaz zeminde WCAG AA garantisi:         */
  --high-pdf:        #E11D48;   /* normal #FB7185 yerine (kontrast 5.2:1) */
  --medium-pdf:      #B45309;   /* normal #F59E0B yerine (kontrast 4.8:1) */
  --safe-pdf:        #047857;   /* normal #10B981 yerine (kontrast 5.8:1) */

  /* Light mode gölge override */
  --shadow-card:     0 8px 32px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.06);
  --shadow-sm:       0 1px 4px rgba(0,0,0,.1);
  --shadow-md:       0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:       0 12px 36px rgba(0,0,0,.16);

  /* Light mode severity bg alpha — daha hafif */
  --critical-bg:     rgba(244,63,94,.08);
  --high-bg:         rgba(225,29,72,.08);
  --medium-bg:       rgba(180,83,9,.08);
  --low-bg:          rgba(161,98,7,.08);
  --safe-bg:         rgba(4,120,87,.08);
  --info-bg:         rgba(3,105,161,.08);
}

/* ============================================================
   LOGO COMPONENT — CSS pattern, reusable
   ============================================================ */

/* Default: 30px (nav) */
.aprt-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: conic-gradient(from 200deg, var(--primary), var(--secondary), var(--primary));
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow);
}
.aprt-logo::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  background: var(--bg);
}
.aprt-logo::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 2px;
  background: var(--gradient-accent);
}

/* sm: 20px (footer, breadcrumb) */
.aprt-logo.sm { width: 20px; height: 20px; border-radius: 6px; }
.aprt-logo.sm::after  { inset: 4px; border-radius: 3px; }
.aprt-logo.sm::before { inset: 7px; }

/* lg: 48px (hero, login page, onboarding) */
.aprt-logo.lg { width: 48px; height: 48px; border-radius: 12px; }
.aprt-logo.lg::after  { inset: 10px; border-radius: 6px; }
.aprt-logo.lg::before { inset: 16px; }

/* ============================================================
   ACCESSIBILITY — Focus ring (brand-primary, WCAG 2.1 §2.4.7)
   ============================================================ */
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   SEVERITY BADGE — Reusable sev-tag classes
   Mockup'taki .tag pattern'i standartlaştırıldı.
   Renk + ikon birlikte kullanımı zorunlu (renk körü a11y).
   ============================================================ */
.sev-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 20px;
}

.sev-tag.info     { background: var(--info-bg);     color: var(--info);     border: 1px solid var(--info-border); }
.sev-tag.pass     { background: var(--safe-bg);     color: var(--safe);     border: 1px solid var(--safe-border); }
.sev-tag.warn     { background: var(--medium-bg);   color: var(--medium);   border: 1px solid var(--medium-border); }
.sev-tag.critical { background: var(--critical-bg); color: var(--critical); border: 1px solid var(--critical-border); }
.sev-tag.high     { background: var(--high-bg);     color: var(--high);     border: 1px solid var(--high-border); }
.sev-tag.low      { background: var(--low-bg);      color: var(--low);      border: 1px solid var(--low-border); }

/* PDF-safe severity overrides (light mode'da otomatik devreye girer) */
[data-theme="light"] .sev-tag.high     { color: var(--high-pdf); }
[data-theme="light"] .sev-tag.warn     { color: var(--medium-pdf); }
[data-theme="light"] .sev-tag.pass     { color: var(--safe-pdf); }

/* ============================================================
   MSSP WHITE-LABEL NOTES
   Partner override örneği (partner kendi CSS'inde):

   :root {
     --primary:       #0066CC;   / partner brand blue /
     --primary-2:     #3399FF;
     --primary-hover: #0052A3;
     --secondary:     #00C49A;
     --shadow-glow:   0 0 30px rgba(0,102,204,.4);
   }
   .aprt-logo {
     background: conic-gradient(from 200deg, var(--primary), var(--secondary), var(--primary));
   }
   ============================================================ */