/* ═══════════════════════════════════════════════════════════════════════════
   StegoPixel — Web Design Tokens
   ---------------------------------------------------------------------------
   A 1:1 translation of the desktop app's Design System ("Data Clarity First"
   + Glass Morphism) into CSS custom properties.

   Source of truth (in the app repo):
     • Presentation/Styles/M3Colors.axaml      → every colour value below
     • .github/skills/ui-style/SKILL.md §5     → token roles + contrast rules
     • .github/skills/ui-style/SKILL.md §9     → spacing / radius / typography

   Values are copied verbatim from the app so the site and the product read as
   one system. If the app's palette changes, change it here too.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scale primitives (theme-independent) ─────────────────────────────────── */
:root {
  /* Typography — the app ships Inter (Avalonia.Fonts.Inter) */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", Consolas,
    "SF Mono", ui-monospace, monospace;

  /* Type ramp — from the app's type hierarchy scale (H1 18pt … Caption 9–10pt),
     re-based for the web so body copy stays comfortable at 16px. */
  --fs-caption: 0.78rem;   /* ~12.5px — data titles, secondary instructions      */
  --fs-h3: 0.9rem;         /* ~14.4px — form labels, core inspector data         */
  --fs-h2: 1.02rem;        /* ~16.3px — accordion categories, sub-sections       */
  --fs-h1: 1.3rem;         /* ~20.8px — module titles                           */
  --fs-body: 1rem;
  --fs-lead: 1.075rem;
  --fs-h2-lg: clamp(1.55rem, 2.9vw, 2.05rem);   /* section headings      */
  --fs-display: clamp(2.15rem, 4.6vw, 3.3rem);  /* page hero             */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-body: 1.62;

  /* The app uses uppercase + tracking for every "data title" (SKILL §4.2) */
  --ls-label: 0.12em;
  --ls-tight: -0.02em;

  /* Radii — the app's scales, verbatim */
  --r-data: 8px;      /* data callout cards            (SKILL §3.1)  */
  --r-input: 10px;    /* inputs / small buttons                       */
  --r-icon: 13px;     /* feature icon tiles                           */
  --r-card: 16px;     /* content containers / glass cards             */
  --r-pill: 20px;     /* active sidebar pill           (SKILL §2.1)  */
  --r-glass-pill: 24px; /* GlassPill buttons           (SKILL §6.3.2)*/
  --r-full: 999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;
  --sp-11: 92px;

  /* Layout — mirrors the app's structural constants (SKILL §2) */
  --sidebar-w: 240px;      /* global navigation sidebar      */
  --inspector-w: 360px;    /* control & inspector column     */
  --canvas-pad: 16px;      /* canvas safety padding          */
  --input-h: 36px;         /* min input / dropdown height    */
  --header-h: 68px;
  --max-w: 1180px;
  --max-w-narrow: 780px;

  /* Motion */
  --dur-fast: 0.15s;
  --dur: 0.24s;
  --dur-slow: 0.6s;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ── DARK THEME (default) ─────────────────────────────────────────────────
   The app's default theme is Dark (appsettings.json → "theme": "Dark").
   Values: M3Colors.axaml → ResourceDictionary x:Key="Dark".
   ────────────────────────────────────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — Ultra-Dark Slate → Charcoal hierarchy */
  --m3-surface: #0f172a;
  --m3-surface-container: #1e293b;
  --m3-surface-container-high: #1e293b;
  --m3-surface-container-highest: #1e293b;
  --m3-surface-variant: #334155;

  /* Accent — Forensic Cyan */
  --m3-primary: #0ea5e9;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #0c4a6e;
  --m3-on-primary-container: #e0f2fe;

  /* Secondary — Cool gray */
  --m3-secondary: #64748b;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #334155;
  --m3-on-secondary-container: #e2e8f0;

  /* Tertiary — Muted slate */
  --m3-tertiary: #94a3b8;
  --m3-on-tertiary: #0f172a;
  --m3-tertiary-container: #1e293b;
  --m3-on-tertiary-container: #cbd5e1;

  /* Semantic */
  --m3-error: #ef4444;
  --m3-on-error: #ffffff;
  --m3-error-container: #7f1d1d;
  --m3-on-error-container: #fecaca;

  --m3-success: #4ade80;
  --m3-on-success: #052e16;
  --m3-success-container: #166534;
  --m3-on-success-container: #dcfce7;

  --m3-warning: #fbbf24;
  --m3-on-warning: #451a03;
  --m3-warning-container: #92400e;
  --m3-on-warning-container: #fef3c7;

  /* Text — Pure White → Cool Muted Gray hierarchy */
  --m3-text-primary: #ffffff;
  --m3-text-secondary: #94a3b8;
  --m3-text-disabled: #475569;

  /* Borders — 1px charcoal */
  --m3-outline: #334155;
  --m3-outline-variant: #1e293b;

  /* Semi-transparent surfaces for sticky bars */
  --m3-surface-overlay: rgba(15, 23, 42, 0.8);
  --m3-surface-overlay-strong: rgba(15, 23, 42, 0.9);

  /* Glass Morphism (Dark) — light-tint glass brightens the dark background */
  --glass-bg: rgba(30, 41, 59, 0.21);
  --glass-bg-strong: rgba(30, 41, 59, 0.28);
  --glass-bg-hover: rgba(30, 41, 59, 0.35);
  --glass-border: rgba(255, 255, 255, 0.157);
  --glass-border-strong: rgba(255, 255, 255, 0.271);
  --glass-shine: rgba(255, 255, 255, 0.031);
  --glass-icon-bg: rgba(30, 41, 59, 0.333);

  /* Elevation (Dark) — from the app's BoxShadows tokens */
  --elev-1: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3);
  --elev-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
  --elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.375), 0 2px 8px rgba(0, 0, 0, 0.19);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.25);

  /* Hover wash for nav / list rows (M3SettingsRowHover equivalent) */
  --hover-wash: rgba(255, 255, 255, 0.055);
  --code-bg: #1e293b;
  --code-fg: #7dd3fc;

  /* Page-level ambience */
  --hero-glow-a: rgba(14, 165, 233, 0.13);
  --hero-glow-b: rgba(139, 92, 246, 0.08);
  --grid-line: rgba(148, 163, 184, 0.07);
}

/* ── LIGHT THEME ──────────────────────────────────────────────────────────
   Values: M3Colors.axaml → ResourceDictionary x:Key="Light".
   Note the accent shift: deep teal, not cyan, to survive light backgrounds.
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — Soft Off-White → Crisp White hierarchy */
  --m3-surface: #f8fafc;
  --m3-surface-container: #e2e8f0;
  --m3-surface-container-high: #e2e8f0;
  --m3-surface-container-highest: #e2e8f0;
  --m3-surface-variant: #ffffff;

  /* Accent — Technical Deep Teal */
  --m3-primary: #0369a1;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #e0f2fe;
  --m3-on-primary-container: #0c4a6e;

  /* Secondary — Slate gray */
  --m3-secondary: #475569;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #cbd5e1;
  --m3-on-secondary-container: #1e293b;

  /* Tertiary — Muted slate */
  --m3-tertiary: #64748b;
  --m3-on-tertiary: #ffffff;
  --m3-tertiary-container: #f1f5f9;
  --m3-on-tertiary-container: #334155;

  /* Semantic */
  --m3-error: #dc2626;
  --m3-on-error: #ffffff;
  --m3-error-container: #fecaca;
  --m3-on-error-container: #7f1d1d;

  --m3-success: #16a34a;
  --m3-on-success: #ffffff;
  --m3-success-container: #dcfce7;
  --m3-on-success-container: #166534;

  --m3-warning: #d97706;
  --m3-on-warning: #ffffff;
  --m3-warning-container: #fef3c7;
  --m3-on-warning-container: #92400e;

  /* Text — Deep Ink Navy → Slate Mid-Gray hierarchy */
  --m3-text-primary: #0f172a;
  --m3-text-secondary: #64748b;
  --m3-text-disabled: #94a3b8;

  /* Borders — 1px light slate */
  --m3-outline: #cbd5e1;
  --m3-outline-variant: #e2e8f0;

  --m3-surface-overlay: rgba(248, 250, 252, 0.8);
  --m3-surface-overlay-strong: rgba(248, 250, 252, 0.9);

  /* Glass Morphism (Light) — high-opacity frost that darkens the page */
  --glass-bg: rgba(226, 232, 240, 0.8);
  --glass-bg-strong: rgba(226, 232, 240, 0.867);
  --glass-bg-hover: rgba(226, 232, 240, 0.9);
  --glass-border: rgba(26, 187, 212, 0.102);        /* subtle cyan edge, never gray */
  --glass-border-strong: rgba(48, 187, 212, 0.188);
  --glass-shine: rgba(255, 255, 255, 0.125);
  --glass-icon-bg: rgba(226, 232, 240, 0.9);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.12);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.12);
  --elev-3: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.12);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.063), 0 1px 4px rgba(0, 0, 0, 0.031);
  --glass-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.094), 0 2px 8px rgba(0, 0, 0, 0.047);

  --hover-wash: rgba(3, 105, 161, 0.06);
  --code-bg: #e2e8f0;
  --code-fg: #0c4a6e;

  --hero-glow-a: rgba(3, 105, 161, 0.1);
  --hero-glow-b: rgba(124, 58, 237, 0.06);
  --grid-line: rgba(15, 23, 42, 0.05);
}

/* ── Icon glow shadows ────────────────────────────────────────────────────
   Bright, saturated values — deliberately NOT the muted M3 tokens, because
   muted colours read as muddy under glass (SKILL §5.1 / anti-pattern table).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --glow-blue:   #0ea5e9;
  --glow-violet: #8b5cf6;
  --glow-green:  #22c55e;
  --glow-amber:  #f59e0b;
  --glow-red:    #ef4444;
  --glow-slate:  #475569;

  --glow-blue-shadow:   0 0 36px rgba(14, 165, 233, 0.31), 0 0 10px rgba(14, 165, 233, 0.157);
  --glow-violet-shadow: 0 0 36px rgba(139, 92, 246, 0.31), 0 0 10px rgba(139, 92, 246, 0.157);
  --glow-green-shadow:  0 0 36px rgba(34, 197, 94, 0.31),  0 0 10px rgba(34, 197, 94, 0.157);
  --glow-amber-shadow:  0 0 36px rgba(245, 158, 11, 0.31), 0 0 10px rgba(245, 158, 11, 0.157);
  --glow-red-shadow:    0 0 36px rgba(239, 68, 68, 0.31),  0 0 10px rgba(239, 68, 68, 0.157);
  --glow-slate-shadow:  0 0 36px rgba(71, 85, 105, 0.31),  0 0 10px rgba(71, 85, 105, 0.157);

  /* Tinted icon backdrops (SKILL §7.4) */
  --glow-blue-bg:   rgba(14, 165, 233, 0.125);
  --glow-violet-bg: rgba(139, 92, 246, 0.125);
  --glow-green-bg:  rgba(34, 197, 94, 0.125);
  --glow-amber-bg:  rgba(245, 158, 11, 0.125);
  --glow-red-bg:    rgba(239, 68, 68, 0.125);
  --glow-slate-bg:  rgba(71, 85, 105, 0.125);
}

/* ── Verdict semantics ────────────────────────────────────────────────────
   Theme-independent by design — a verdict must read identically in both
   themes. All four pass WCAG AA against white text (SKILL §5.1).
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --verdict-positive: #166534;  /*  7.1:1 — authentic / natural / clean */
  --verdict-caution:  #854d0e;  /*  6.9:1 — medium risk, partial        */
  --verdict-negative: #991b1b;  /*  8.3:1 — hidden payload, anomalies   */
  --verdict-neutral:  #334155;  /* 10.4:1 — no data, not-yet-run        */
}