/*
 * Piservo PAM — Design Tokens v1
 * ================================
 * Dil: "Security operations · warm serif · dark-first · oxide accent · enterprise density"
 * Kapsam: Blazor Cloud Portal + SaaS Admin
 * Avalonia parite: src/Piservo.PAM.Desktop/Styles/DesignTokens.axaml
 *
 * KURALLAR:
 * 1. Hiçbir component rule literal hex kullanmaz; token referansı zorunlu.
 * 2. Her token light'ta tanımlanır; dark iki ayrı blokta yeniden tanımlanır
 *    (prefers-color-scheme + explicit data-theme).
 * 3. Semantic color (good/warn/critical/info) accent'ten AYRI; karıştırma.
 * 4. Türkçe diakritik (ğŞçĞÜİüşıÇöÖ) her fontta test edilmiş.
 */

/* ───────────────────────────────────────────────────────── 1. LIGHT ─ */
:root {
  color-scheme: light;

  /* Core neutrals — warm bias (soğuk corporate gri'den ayrışma) */
  --pam-bg:            #f1ede4;  /* warm paper */
  --pam-surface:       #faf7f0;  /* high paper */
  --pam-surface-r:     #ffffff;  /* pure paper (raised) */
  --pam-surface-s:     #e8e2d4;  /* sunken warm */
  --pam-fg:            #1a1812;  /* warm charcoal */
  --pam-fg-muted:      #52504a;  /* muted charcoal */
  --pam-fg-faint:      #8e8a7e;  /* faint warm gray */
  --pam-rule:          #d9d2c0;  /* warm hairline */
  --pam-rule-strong:   #b8af9a;  /* strong rule */

  /* Accent — Piservo oksit/terra (TEK accent, kıskançça kullan) */
  --pam-accent:        #a84f29;  /* oxide */
  --pam-accent-ink:    #6e3015;  /* deep oxide (hover + emphasis) */
  --pam-accent-soft:   #ecd4c2;  /* pale oxide (row highlight, pill bg) */

  /* Semantic — 4 rol */
  --pam-good:          #2f6a51;  /* evergreen — online, success, verified */
  --pam-good-soft:     #cfe2d4;
  --pam-warn:          #b08726;  /* ocher — pending, degraded, caution */
  --pam-warn-soft:     #efe2bc;
  --pam-critical:      #a73e3e;  /* oxide red — offline, error, breach */
  --pam-critical-soft: #ebd2cd;
  --pam-info:          #45617f;  /* slate — scheduled, future, note */
  --pam-info-soft:     #d2dde8;

  /* Chart — sequential + categorical (warm bias) */
  --pam-chart-1: var(--pam-accent);
  --pam-chart-2: #4f7f6a;   /* sage-green */
  --pam-chart-3: #c48e3a;   /* amber */
  --pam-chart-4: #6b7a9a;   /* warm slate */
  --pam-chart-5: #8c5f8f;   /* dusty plum */
  --pam-chart-6: #a86b4a;   /* terracotta */

  /* Typography */
  --pam-font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --pam-font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pam-font-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* Type scale (modular) */
  --pam-text-xs:   11px;    /* mono uppercase label, metadata chip */
  --pam-text-sm:   12.5px;  /* table body, dense content */
  --pam-text-md:   14.5px;  /* body default, form input */
  --pam-text-lg:   16px;    /* section intro, lede */
  --pam-text-xl:   19px;    /* card title, dialog header */
  --pam-text-2xl:  24px;    /* page title */
  --pam-text-3xl:  30px;    /* hero section head */
  --pam-text-4xl:  38px;    /* flagship hero */
  --pam-text-5xl:  54px;    /* marketing display */

  --pam-leading-tight: 1.1;
  --pam-leading-snug:  1.3;
  --pam-leading-base:  1.5;
  --pam-leading-loose: 1.7;

  /* Spacing (4px base) */
  --pam-sp-0:  0;
  --pam-sp-1:  2px;
  --pam-sp-2:  4px;
  --pam-sp-3:  8px;
  --pam-sp-4:  12px;
  --pam-sp-5:  16px;
  --pam-sp-6:  20px;
  --pam-sp-7:  24px;
  --pam-sp-8:  32px;
  --pam-sp-9:  40px;
  --pam-sp-10: 48px;
  --pam-sp-11: 56px;
  --pam-sp-12: 72px;

  /* Radius (düşük — enterprise + paper hissi) */
  --pam-radius-sm: 2px;   /* pill, chip */
  --pam-radius-md: 4px;   /* button, input, card */
  --pam-radius-lg: 8px;   /* dialog, drawer */
  --pam-radius-xl: 12px;  /* hero card, feature tile */

  /* Shadow */
  --pam-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --pam-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --pam-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);

  /* Z-index */
  --pam-z-base:     0;
  --pam-z-sticky:   10;
  --pam-z-nav:      20;
  --pam-z-dropdown: 30;
  --pam-z-drawer:   40;
  --pam-z-modal:    50;
  --pam-z-toast:    60;

  /* Motion */
  --pam-ease:      cubic-bezier(0.33, 1, 0.68, 1);  /* easeOutCubic */
  --pam-dur-fast:  150ms;
  --pam-dur-base:  220ms;
  --pam-dur-slow:  360ms;

  /* Component surface accent — focus ring, link, selected */
  --pam-focus-ring: 0 0 0 2px var(--pam-surface-r), 0 0 0 4px var(--pam-accent);
  --pam-link:       var(--pam-accent);
  --pam-link-hover: var(--pam-accent-ink);
  --pam-selected:   var(--pam-accent-soft);

  /* Shell (sidebar + top-row) — 2026-10-19 Faz 1.B.2:
     sidebar her tema'da warm-ink dark kalır (SOC flagship nav için kalıcı
     tasarım kararı). Avalonia parite: Styles/DesignTokens.axaml PamShell*. */
  --pam-shell-bg:            #141208;
  --pam-shell-bg-grad:       #0f0d06;
  --pam-shell-bg-soft:       #1c1a10;
  --pam-shell-bg-hover:      #262317;
  --pam-shell-fg:            #f1ebd8;
  --pam-shell-fg-muted:      #c0b9a4;
  --pam-shell-fg-faint:      #7a7462;
  --pam-shell-border:        #3f3b26;
  --pam-shell-border-soft:   #2a2718;
  --pam-shell-accent:        #a84f29;
  --pam-shell-accent-hover:  #d87a52;
  --pam-shell-accent-soft:   #4a2817;
  --pam-shell-accent-ink:    #ebb897;
}

/* ────────────────────────────────────── 2. DARK (system follow) ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --pam-bg:            #141208;  /* warm ink */
    --pam-surface:       #1c1a10;  /* mid ink */
    --pam-surface-r:     #262317;  /* raised ink */
    --pam-surface-s:     #0f0d06;  /* deep ink */
    --pam-fg:            #f1ebd8;  /* warm bone */
    --pam-fg-muted:      #c0b9a4;
    --pam-fg-faint:      #7a7462;
    --pam-rule:          #2a2718;
    --pam-rule-strong:   #3f3b26;

    --pam-accent:        #d87a52;  /* burnished */
    --pam-accent-ink:    #ebb897;  /* warm highlight */
    --pam-accent-soft:   #4a2817;  /* deep oxide */

    --pam-good:          #6ea389;  /* moss */
    --pam-good-soft:     #1c3528;
    --pam-warn:          #d6b05e;  /* honey */
    --pam-warn-soft:     #3a2f17;
    --pam-critical:      #d47878;  /* rose */
    --pam-critical-soft: #3b1c1c;
    --pam-info:          #85a4c2;  /* slate highlight */
    --pam-info-soft:     #1c2a3a;

    --pam-chart-2: #6ea389;
    --pam-chart-3: #d6b05e;
    --pam-chart-4: #8c9bb8;
    --pam-chart-5: #b088b2;
    --pam-chart-6: #c89275;

    --pam-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --pam-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --pam-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

    --pam-focus-ring: 0 0 0 2px var(--pam-surface-s), 0 0 0 4px var(--pam-accent);
  }
}

/* ──────────────────────────────── 3. DARK (explicit toggle) ─── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --pam-bg:            #141208;
  --pam-surface:       #1c1a10;
  --pam-surface-r:     #262317;
  --pam-surface-s:     #0f0d06;
  --pam-fg:            #f1ebd8;
  --pam-fg-muted:      #c0b9a4;
  --pam-fg-faint:      #7a7462;
  --pam-rule:          #2a2718;
  --pam-rule-strong:   #3f3b26;

  --pam-accent:        #d87a52;
  --pam-accent-ink:    #ebb897;
  --pam-accent-soft:   #4a2817;

  --pam-good:          #6ea389;
  --pam-good-soft:     #1c3528;
  --pam-warn:          #d6b05e;
  --pam-warn-soft:     #3a2f17;
  --pam-critical:      #d47878;
  --pam-critical-soft: #3b1c1c;
  --pam-info:          #85a4c2;
  --pam-info-soft:     #1c2a3a;

  --pam-chart-2: #6ea389;
  --pam-chart-3: #d6b05e;
  --pam-chart-4: #8c9bb8;
  --pam-chart-5: #b088b2;
  --pam-chart-6: #c89275;

  --pam-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --pam-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --pam-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  --pam-focus-ring: 0 0 0 2px var(--pam-surface-s), 0 0 0 4px var(--pam-accent);
}

/* ──────────────────────────────────────────────── 4. BASE RESET ─── */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--pam-bg);
  color: var(--pam-fg);
  font-family: var(--pam-font-body);
  font-size: var(--pam-text-md);
  line-height: var(--pam-leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a {
  color: var(--pam-link);
  text-decoration: none;
  transition: color var(--pam-dur-fast) var(--pam-ease);
}
a:hover { color: var(--pam-link-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--pam-focus-ring);
  border-radius: var(--pam-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 10ms !important;
    transition-duration: 10ms !important;
  }
}

/* Typography defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pam-font-display);
  font-weight: 500;
  line-height: var(--pam-leading-tight);
  text-wrap: balance;
  margin: 0;
  color: var(--pam-fg);
}

p { margin: 0; max-width: 65ch; text-wrap: pretty; }

code, pre, kbd, samp {
  font-family: var(--pam-font-mono);
  font-size: 0.92em;
}

/* Tabular numbers (lists, tables, KPIs) */
.pam-tabular { font-variant-numeric: tabular-nums; }

/* Mono uppercase micro label (eyebrow, chip, metadata) */
.pam-eyebrow {
  font-family: var(--pam-font-mono);
  font-size: var(--pam-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pam-fg-faint);
  font-weight: 600;
}