/* @adr [[ADR-CSS]]  */
/* @guide [[chrome-modern-css]]  */

/* css/variables.css */
@layer reset, tokens, layout, floating;

@property --guide-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.15;
}

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  transition: --guide-opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* === 1. SURFACES & NEUTRALS === */
  /* Premium Dark Mode: Deep, sleek midnight blue/charcoal. Light Mode: Clean, airy pearl/slate. */
  --bg-viewport: light-dark(oklch(0.96 0.01 250), oklch(0.2735 0.0179 251.92));
  --bg-sidebar: light-dark(oklch(0.98 0.005 250), oklch(0.21 0.04 260));
  /* @todo(chrome-152): Refactor with CSS Color 5 alpha() function e.g. alpha(var(--bg-sidebar) 80%) */
  --bg-sidebar-glass: light-dark(oklch(0.98 0.005 250 / 80%), oklch(0.21 0.04 260 / 80%));
  --bg-card: light-dark(oklch(1 0 0), oklch(0.24 0.04 260));
  
  --border-color: light-dark(oklch(0.90 0.01 250), oklch(0.30 0.03 260));
  --border-color-focus: var(--accent-color);

  /* === 2. TEXT (UI ONLY) === */
  --text-primary: light-dark(oklch(0.15 0.02 250), oklch(0.96 0.01 260));
  --text-muted: light-dark(oklch(0.45 0.02 250), oklch(0.70 0.02 260));

  /* === 3. PAPER (ISOLATED) === */
  /* Das Blatt Papier und die Tinte bleiben IMMER identisch, egal welches UI-Theme aktiv ist. WYSIWYG! */
  --paper-bg: oklch(100% 0 0); /* Strahlend weiss */
  --paper-text: oklch(0% 0 0); /* Pechschwarz */
  --paper-ghost: oklch(50% 0 0); /* Anthrazit fuer Platzhalter */

  /* === 4. ACCENT === */
  /* Eigene edle Akzentfarbe statt OS-Default, passend zum royalen Blau */
  --accent-color: light-dark(oklch(0.40 0.14 260), oklch(0.85 0.05 260));
  --accent-muted: light-dark(oklch(0.95 0.03 260), oklch(0.35 0.08 260));
  
  /* Robust color-mix for hover & glow states */
  --accent-hover: color-mix(in srgb, var(--accent-color), black 10%);
  --accent-glow: color-mix(in srgb, var(--accent-color), transparent 85%);

  /* === 5. INTERACTIVE & SEGMENTED CONTROLS === */
  --segment-bg: light-dark(oklch(0.92 0.01 250), oklch(0.24 0.03 260));
  --segment-active-bg: light-dark(oklch(1 0 0), oklch(0.30 0.03 260));
  --segment-active-text: var(--text-primary);
  --segment-active-shadow: light-dark(0 1px 3px oklch(0 0 0 / 8%), 0 2px 6px oklch(0 0 0 / 50%));
  
  /* === 6. FEEDBACK === */
  --c-primary: var(--accent-color);
  --c-success: light-dark(oklch(0.65 0.12 150), oklch(0.70 0.10 150));
  --c-warning: light-dark(oklch(0.75 0.14 75), oklch(0.80 0.12 75));
  --c-danger: light-dark(oklch(0.60 0.15 25), oklch(0.65 0.13 25));

  /* Shadow & Blur tokens */
  --shadow-sm: 0 2px 8px oklch(0% 0 0 / 5%);
  --shadow-lg: 0 16px 40px oklch(0% 0 0 / 12%);

  --glass-blur: blur(20px);
  
  /* DIN Paper layout configurations */
  --paper-zoom: 1;
  --guide-opacity: 0.15;
  --guide-color: oklch(from var(--paper-text) l c h);
  
  /* Active Font Stack variable */
  --font-active-stack: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body:has(#btn-theme-light:checked) { color-scheme: light; }
body:has(#btn-theme-dark:checked) { color-scheme: dark; }

body:has(#btn-font-sans:checked) { --font-active-stack: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body:has(#btn-font-serif:checked) { --font-active-stack: "Times New Roman", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

[popover] {
  color-scheme: inherit;
}