/*
 * ══════════════════════════════════════════════════════════════════
 * Evidence First Design System
 * Single Source of Truth: theme.css
 * ══════════════════════════════════════════════════════════════════
 *
 * ── SECTION 1 — Status ─────────────────────────────────────────
 *
 * Legacy Level 1 / 2 / 3 card system    REMOVED — fully gone
 * Old mobile scaling system             REMOVED — fully gone
 * Old radius system                     REMOVED — fully gone
 *   (--radius-0, --radius-xs, --radius-input all removed)
 * Mobile-first architecture             ACTIVE
 *   Base rules carry mobile values.
 *   Desktop uses @media (min-width: 601px) overrides.
 * theme.css                             CANONICAL TOKEN SOURCE
 *   All spacing, typography, radius, and color tokens are
 *   defined here. No token definitions exist elsewhere.
 *
 *
 * ── SECTION 2 — Primitive tokens ───────────────────────────────
 *
 * Internal base layer. Not for direct component use.
 * Components reference semantic tokens (Section 3).
 * Dark mode and login screen override these primitives;
 * semantic tokens then resolve automatically.
 *
 * Surface primitives:
 *   --bg:     #F4F3F0          dark: #111111   login: #111111
 *   --bg1:    #FFFFFF          dark: #1C1C1C   login: #1C1C1C
 *   --bg2:    #EEEDE9          dark: #222120   login: #1C1C1C
 *   --bg3:    #E7E6E2          dark: #2B2A28   login: #222120
 *   --bg4:    #DDDBD6          dark: #353330   login: #2B2A28
 *
 * Text primitives:
 *   --t1:     #111111          dark: #EFEFED   login: #F0F0F0
 *   --t2:     #444444          dark: #ADADAA   login: #C0C0C0
 *   --t3:     #888888          dark: #6A6865   login: #6B6B6B
 *   --t4:     #BBBBBB          dark: #3D3B38   login: #3D3B38
 *
 * Border primitives:
 *   --line:   rgba(0,0,0,0.07)    dark: rgba(255,255,255,0.07)
 *                                 login: rgba(255,255,255,0.07)
 *   --line2:  rgba(0,0,0,0.11)    dark: rgba(255,255,255,0.11)
 *                                 login: rgba(255,255,255,0.14)
 *
 * Accent primitive:
 *   --y:      #FFC700             (unchanged in dark and login)
 *   --y-glow: rgba(255,199,0,0.14)  dark: rgba(255,199,0,0.13)
 *
 *
 * ── SECTION 3 — Semantic tokens ────────────────────────────────
 *
 * Text:
 *   --text-primary:   var(--t1)        #111111  / dark #EFEFED
 *   --text-secondary: var(--t2)        #444444  / dark #ADADAA
 *   --text-muted:     var(--t3)        #888888  / dark #6A6865
 *   --text-faint:     var(--t4)        #BBBBBB  / dark #3D3B38
 *   --text-accent:    var(--y)         #FFC700  (both modes)
 *   --text-on-accent: #111111          (both modes, hardcoded)
 *
 * Surface:
 *   --surface-page:    var(--bg)       #F4F3F0  / dark #111111
 *   --surface-card:    var(--bg1)      #FFFFFF  / dark #1C1C1C
 *   --surface-soft:    var(--bg2)      #EEEDE9  / dark #222120
 *   --surface-input:   var(--bg3)      #E7E6E2  / dark #2B2A28
 *   --surface-strong:  var(--bg4)      #DDDBD6  / dark #353330
 *   --surface-accent:  var(--y)        #FFC700  (both modes)
 *   --surface-overlay: rgba(0,0,0,0.65)  dark: rgba(0,0,0,0.72)
 *
 * Border (color values only — never shorthand properties):
 *   --border-subtle:  var(--line)      rgba(0,0,0,0.07)
 *                                      dark rgba(255,255,255,0.07)
 *   --border-default: var(--line2)     rgba(0,0,0,0.11)
 *                                      dark rgba(255,255,255,0.11)
 *   --border-strong:  rgba(0,0,0,0.14) dark rgba(255,255,255,0.13)
 *   --border-accent:  rgba(255,199,0,0.22)  dark rgba(255,199,0,0.18)
 *
 * State:
 *   --state-success: #22863a           dark: #4caf50
 *   --state-error:   #d73a3a           dark: #ff6b6b
 *
 * Shadow:
 *   --shadow-card:
 *     light: 0 1px 3px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04)
 *     dark:  0 1px 3px rgba(0,0,0,0.4),  0 0 1px rgba(0,0,0,0.2)
 *   --shadow-overlay:
 *     light: 0 8px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06)
 *     dark:  0 8px 40px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.35)
 *   --shadow-float:
 *     light: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04)
 *     dark:  0 4px 24px rgba(0,0,0,0.36), 0 1px 4px rgba(0,0,0,0.18)
 *
 * Shell:
 *   --app-content-offset: 85px
 *
 *
 * ── SECTION 4 — Typography tokens ──────────────────────────────
 *
 * All typography tokens are static. They live in :root and do NOT
 * change between light and dark themes.
 *
 * Font size:
 *   --fs-2xs:  10px
 *   --fs-xs:   12px
 *   --fs-sm:   14px
 *   --fs-base: 16px      (iOS zoom-fix baseline for form inputs)
 *   --fs-md:   18px
 *   --fs-lg:   20px
 *   --fs-xl:   22px
 *   --fs-2xl:  28px
 *   --fs-hero: 36px     (Hero H1 — Dashboard, Intro, Persona, Phase-Intro)
 *
 * Line height:
 *   --lh-tight:   1.1
 *   --lh-hero:    0.98    (Hero H1 — tight display line-height)
 *   --lh-snug:    1.35
 *   --lh-normal:  1.5
 *   --lh-relaxed: 1.6
 *   --lh-loose:   1.8
 *
 * Font weight:
 *   --fw-regular:  400
 *   --fw-medium:   500
 *   --fw-semibold: 600
 *   --fw-bold:     700
 *   --fw-heavy:    900
 *
 * Letter spacing:
 *   --ls-tight:  -0.02em
 *   --ls-hero:   -0.048em   (Hero H1 — display letter-spacing)
 *   --ls-normal: 0
 *   --ls-wide:   0.06em
 *   --ls-wider:  0.12em
 *
 *
 * ── SECTION 5 — Spacing tokens ─────────────────────────────────
 *
 * 4px base grid. Static — live in :root, not theme-dependent.
 *
 *   --space-1:  4px
 *   --space-2:  8px
 *   --space-3:  12px
 *   --space-4:  16px
 *   --space-5:  20px
 *   --space-6:  24px
 *   --space-7:  28px
 *   --space-8:  32px
 *
 *
 * ── SECTION 6 — Radius tokens ──────────────────────────────────
 *
 * Active canonical radius system only.
 * Removed: --radius-0, --radius-xs, --radius-input.
 *
 *   --radius-sm:         6px     inputs, small controls
 *   --radius-md:         8px     cards, callouts, panels, chat bubbles
 *   --radius-xl:         32px    floating panels (section nav dropdown)
 *   --radius-inner:      24px    active highlight inside floating panels
 *   --radius-pill:       9999px  pill controls, toggle tracks
 *   --radius-stage-open: 20px    app-stage during sidebar-open animation
 *
 *
 * ── SECTION 7 — Architectural rules ────────────────────────────
 *
 *   Base rules carry mobile values.
 *   Desktop uses targeted @media (min-width: 601px) overrides.
 *   Spacing and typography tokens must live in :root — never
 *     inside a theme selector or media query.
 *   Theme-dependent values belong in html[data-theme="dark"]
 *     only where the value actually differs from light mode.
 *   Semantic tokens reference primitives via var() — never raw
 *     hex or rgba unless no primitive exists for that value.
 *   No legacy bridge tokens.
 *   No Level 1 / 2 / 3 card system.
 *   No old mobile scaling system.
 *   No old radius system.
 *   No new hardcoded design values without an explicit system
 *     decision recorded here.
 *
 *
 * ── SECTION 8 — Known accepted exception ───────────────────────
 *
 *   --y-glow (rgba(255,199,0,0.14) light / rgba(255,199,0,0.13) dark)
 *   remains a primitive token with direct usage in components.css
 *   (9 selectors). No semantic equivalent exists in the current
 *   system. No new token was introduced. Documented and accepted.
 *
 * ══════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   :root — Static Tokens + Light Mode
   All spacing, typography, radius, and shell tokens are static
   and live here. Only color-dependent values override in themes.
═══════════════════════════════════════════════════════════════ */
:root {

  /* ── Input Typography ── */
  --input-font-family:      'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --input-font-size:        var(--fs-base);
  --input-font-weight:      400;
  --input-letter-spacing:   0;
  --input-line-height:      var(--lh-relaxed);
  --input-text-color:       var(--text-primary);
  --input-placeholder-color: var(--text-faint);

  /* ── Shell ── */
  --app-content-offset: 85px;
  --safe-inset-top:     0px;

  /* ── Step Navigation ── */
  --step-nav-padding: 40px;

  /* ── Button Token System ── */
  --btn-primary-height:        56px;
  --btn-primary-radius:        16px;
  --btn-primary-font-size:     16px;
  --btn-primary-font-weight:   700;
  --btn-primary-padding-x:     20px;

  --btn-primary-bg:            #FFC700;
  --btn-primary-text:          #000000;
  --btn-primary-hover-bg:      #F0BD00;
  --btn-primary-pressed-bg:    #E3B300;
  --btn-primary-focus-ring:    rgba(0,0,0,0.4);

  --btn-disabled-bg:           #E7E2D7;
  --btn-disabled-text:         #9C978C;

  /* Loading = Disabled (gleiche Tokens, Unterschied via Spinner) */

  /* ── Work Step ── */
  --ws-h1-size:              30px;
  --ws-h1-padding-x:         20px;
  --ws-sub-size:             16px;
  --ws-sub-padding-x:        20px;
  --ws-body-size:            18px;
  --ws-body-padding-left:    30px;
  --ws-body-padding-right:   30px;
  --ws-hint-size:            16px;
  --ws-hint-padding-left:    10px;
  --ws-hint-padding-right:   10px;
  --ws-example-size:         18px;
  --ws-denkansatz-size:      18px;
  --ws-denkansatz-padding-x: 30px;
  --ws-question-size:        22px;
  --ws-question-padding-x:   30px;
  --ws-question-padding-top: 20px;
  --ws-content-padding-x:    20px;
  --ws-textarea-bg:          var(--surface-soft);
  --ws-icons-padding-x:      0px;

  /* ── Radius ── */
  --radius-sm:         6px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         32px;
  --radius-inner:      24px;
  --radius-pill:       9999px;
  --radius-stage-open: 20px;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;

  /* ── Layout-Konstanten (semantisch) ── */
  --cta-clearance:  80px;   /* Platz für fixed CTA-Button unten */

  /* ── Chip / Pill Component ── */
  --chip-py:        7px;    /* Chip vertikal padding */
  --chip-gap:       7px;    /* Chip innerer Abstand (dot ↔ text) */
  --chip-dot-size:  5px;    /* Chip indicator dot */

  /* ── Typography — Font Size ── */
  --fs-2xs:   10px;
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-hero:  36px;     /* Hero H1 — Dashboard, Intro, Persona, Phase-Intro */

  /* ── Typography — Line Height ── */
  --lh-tight:   1.1;
  --lh-hero:    0.98;   /* Hero H1 display line-height */
  --lh-snug:    1.35;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

  /* ── Typography — Font Weight ── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    900;

  /* ── Typography — Letter Spacing ── */
  --ls-subtle: -0.01em;   /* Subtiles kerning (Chip, Sub, Body-Display) */
  --ls-tight:  -0.02em;
  --ls-hero:   -0.048em;  /* Hero H1 display letter-spacing */
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-wider:  0.12em;
  --ls-widest: 0.18em;    /* Display-Labels (Scope etc.) */

  /* ──────────────────────────────────────────
     FOUNDATION PRIMITIVES — Light
     Internal base layer. Not for direct component use.
     Semantic tokens below reference these.
  ────────────────────────────────────────── */
  --bg:     #F4F3F0;
  --bg1:    #FFFFFF;
  --bg2:    #EEEDE9;
  --bg3:    #E7E6E2;
  --bg4:    #DDDBD6;

  --t1:     #111111;
  --t2:     #444444;
  --t3:     #888888;
  --t4:     #BBBBBB;

  --line:   rgba(0,0,0,0.07);
  --line2:  rgba(0,0,0,0.11);

  --y:        #FFC700;
  --y-glow:   rgba(255,199,0,0.14);
  --y-border: rgba(255,199,0,0.22);   /* Chip border, subtle accent outline */
  --y-shadow: rgba(255,199,0,0.60);   /* Accent glow shadow */

  /* ──────────────────────────────────────────
     SEMANTIC — Text
  ────────────────────────────────────────── */
  --text-primary:   var(--t1);
  --text-secondary: var(--t2);
  --text-muted:     var(--t3);
  --text-faint:     var(--t4);
  --text-accent:    var(--y);
  --text-on-accent: #111111;

  /* ──────────────────────────────────────────
     SEMANTIC — Surface
  ────────────────────────────────────────── */
  --surface-page:    var(--bg);
  --test-safe-fill:  pink;
  --surface-card:    var(--bg1);
  --surface-soft:    #FFFFFF;
  --surface-input:   var(--bg3);
  --surface-strong:  var(--bg4);
  --surface-accent:  var(--y);
  --surface-overlay: rgba(0,0,0,0.65);

  /* ──────────────────────────────────────────
     SEMANTIC — Border (color values, not shorthands)
  ────────────────────────────────────────── */
  --border-subtle:  var(--line);
  --border-default: var(--line2);
  --border-strong:  rgba(0,0,0,0.14);
  --border-accent:  rgba(255,199,0,0.22);

  /* ──────────────────────────────────────────
     SEMANTIC — Ghost Input
     Shared across all Ghost-context inputs.
     Applied via .ghost-ctx parent class.
  ────────────────────────────────────────── */
  --ghost-border-hover: rgba(0,0,0,0.14);
  --ghost-bg-focus:     #FFFFFF;
  --ghost-ring-focus:   rgba(255,199,0,0.30);

  /* ──────────────────────────────────────────
     SEMANTIC — Info Layer (Beispiel / Fehler)
  ────────────────────────────────────────── */
  --layer-bg:             #FFFFFF;
  --layer-border:         rgba(0,0,0,0.06);
  --layer-shadow:         0 2px 6px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --layer-eyebrow:        var(--y);
  --layer-text-primary:   #444444;
  --layer-text-secondary: #888888;

  /* ──────────────────────────────────────────
     SEMANTIC — State
  ────────────────────────────────────────── */
  --state-success: #22863a;
  --state-error:   #d73a3a;

  /* ──────────────────────────────────────────
     SEMANTIC — Shadow
  ────────────────────────────────────────── */
  --shadow-card:    0 1px 3px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04);
  --shadow-overlay: 0 8px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-float:   0 8px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-result:  0 12px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-outline: 0 4px 12px rgba(0,0,0,0.06);

  --surface-outline: 1px solid rgba(0,0,0,0.08);

  /* SEMANTIC — Glass (button-level: burger, settings, section-nav) */
  --glass-bg:          rgba(120,120,128,0.2);
  --glass-bg-fallback: rgba(120,120,128,0.5);
  --glass-border:      rgba(120,120,128,0.25);

  /* SEMANTIC — TopBar (exact rendered values — do NOT derive from --glass-*) */
  --topbar-bg:                rgba(255,255,255,0.62);
  --topbar-bg-hover:          rgba(120,120,128,0.32);
  --topbar-border:            rgba(0,0,0,0.07);
  --topbar-shadow-outer:      rgba(0,0,0,0.08);
  --topbar-shadow-inset-top:  rgba(255,255,255,0.55);
  --topbar-shadow-inset-ring: rgba(255,255,255,0.18);
  --topbar-blur:              blur(20px) saturate(135%);

  /* SEMANTIC — Glass Panel (panel-level: overlay cards, menu surfaces, modals) */
  --glass-panel-bg:          rgba(246,246,248,0.72);
  --glass-panel-bg-fallback: rgba(246,246,248,0.88);
  --glass-panel-border:      rgba(255,255,255,0.42);
  --glass-panel-blur:        22px;
  --glass-panel-saturate:    140%;

  /* SEMANTIC — Ambient Glow (Dark-Mode-Signatur, Light = 0) */
  --ambient-opacity: 0;
  --ambient-blur:    30px;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode — primitive + semantic overrides only
   Spacing, typography, radius, and shadow-structure are
   theme-independent and remain in :root above.
═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {

  --bg:     #111111;
  --bg1:    #1C1C1C;
  --bg2:    #222120;
  --bg3:    #2B2A28;
  --bg4:    #353330;

  --t1:     #EFEFED;
  --t2:     #ADADAA;
  --t3:     #6A6865;
  --t4:     #3D3B38;

  --line:   rgba(255,255,255,0.07);
  --line2:  rgba(255,255,255,0.11);

  --y-glow:   rgba(255,199,0,0.13);
  --y-border: rgba(255,199,0,0.22);   /* Chip border, subtle accent outline */
  --y-shadow: rgba(255,199,0,0.60);   /* Accent glow shadow */

  --ambient-opacity: 0.05;

  --border-strong:   rgba(255,255,255,0.13);
  --border-accent:   rgba(255,199,0,0.18);
  --state-success:   #4caf50;
  --state-error:     #ff6b6b;

  /* Ghost Input — dark mode overrides */
  --ghost-border-hover: rgba(255,255,255,0.10);
  --ghost-bg-focus:     #000000;
  --ghost-ring-focus:   rgba(255,199,0,0.25);

  /* Info Layer — dark mode overrides */
  --layer-bg:             #1C1C1C;
  --layer-border:         rgba(255,255,255,0.06);
  --layer-shadow:         0 2px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.03);
  --layer-text-primary:   #CDCDCD;
  --layer-text-secondary: #B8BABA;
  --shadow-card:     0 1px 3px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,0.2);
  --shadow-overlay:  0 8px 40px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-float:    0 10px 28px rgba(0,0,0,0.30), 0 1px 4px rgba(0,0,0,0.14);
  --shadow-result:   0 16px 40px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-outline:  0 10px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04);

  --surface-outline: 1px solid rgba(255,255,255,0.10);

  --glass-bg:          rgba(255,255,255,0.04);
  --glass-bg-fallback: rgba(255,255,255,0.08);
  --glass-border:      rgba(255,255,255,0.12);

  /* SEMANTIC — TopBar (exact rendered values — do NOT derive from --glass-*) */
  --topbar-bg:                rgba(6,6,6,0.78);
  --topbar-bg-hover:          rgba(255,255,255,0.12);
  --topbar-border:            rgba(255,255,255,0.09);
  --topbar-shadow-outer:      rgba(0,0,0,0.42);
  --topbar-shadow-inset-top:  rgba(255,255,255,0.06);
  --topbar-shadow-inset-ring: rgba(255,255,255,0.03);
  --topbar-blur:              blur(22px) saturate(140%);

  --glass-panel-bg:          rgba(18,18,20,0.72);
  --glass-panel-bg-fallback: rgba(18,18,20,0.84);
  --glass-panel-border:      rgba(255,255,255,0.10);
  --glass-panel-saturate:    135%;
  --surface-overlay: rgba(0,0,0,0.72);
  --surface-soft: #242424;
  --test-safe-fill: green;

  --btn-primary-focus-ring:  rgba(255,255,255,0.4);
  --btn-disabled-bg:         #D9D2C3;
  --btn-disabled-text:       #8F8B82;
}

/* ═══════════════════════════════════════════════════════════════
   Login Screen — forced dark
   Primitive overrides only. Semantic tokens follow automatically.
═══════════════════════════════════════════════════════════════ */
html[data-page="login"] {
  --bg:    #111111;
  --bg1:   #1C1C1C;
  --bg2:   #1C1C1C;
  --bg3:   #222120;
  --bg4:   #2B2A28;

  --t1:    #F0F0F0;
  --t2:    #C0C0C0;
  --t3:    #6B6B6B;
  --t4:    #3D3B38;

  --line:  rgba(255,255,255,0.07);
  --line2: rgba(255,255,255,0.14);

  --border-strong: rgba(255,255,255,0.13);
  --border-accent: rgba(255,199,0,0.18);

  /* Ghost Input — Login bleibt dunkel */
  --ghost-bg-focus:     #1C1C1C;
  --ghost-border-hover: rgba(255,255,255,0.15);
  --ghost-ring-focus:   rgba(255,199,0,0.25);

  /* Button Disabled — passend auf schwarzem Screen */
  --btn-disabled-bg:    rgba(255,255,255,0.08);
  --btn-disabled-text:  #6B6B6B;
}


/* ═══════════════════════════════════════════════════════════════
   Ghost Input System
   Tokens: --ghost-border-hover, --ghost-bg-focus, --ghost-ring-focus
   Applied via: .ghost-ctx parent class in components.css
   Contexts: .ghost-ctx, .ws-step, .aus-flow,
             [data-page-type="phase_result"] .result-textarea

   States:
     rest  → border: transparent, bg: transparent
     hover → border: var(--ghost-border-hover)
     focus → bg: var(--ghost-bg-focus)
             border: #FFC700
             box-shadow: 0 0 0 1px var(--ghost-ring-focus)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Transitions
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.12s ease;
}
input, textarea, select {
  transition: border-color 0.15s ease;
}
html, body, .app-sidebar, .safe-area-top {
  transition: none;
}