/* =========================================================================
   PostAir Design Tokens
   Federleichtes Kommentieren & Posten für LinkedIn
   ------------------------------------------------------------------------
   Architektur:
     1) PRIMITIVE Tokens (Rohfarben — niemals direkt in Components verwenden)
     2) SEMANTIC Tokens (Light Mode = default)
     3) Dark Mode Overrides ([data-theme="dark"])
     4) Optional: Auto Dark Mode via OS-Präferenz

   Verwendung in Components:
     color: var(--text);
     background: var(--bg-alt);
     border: 1px solid var(--border);
   ========================================================================= */

:root {
  /* ─── 1) PRIMITIVE TOKENS ────────────────────────────────────────────── */

  /* Blue Scale */
  --blue-25:    #FAFCFF;   /* Air White */
  --blue-50:    #F0F7FF;   /* Cloud White */
  --blue-100:   #E4F1FC;   /* Cloud Hover */
  --blue-200:   #D6EEFF;   /* Sky Blue */
  --blue-300:   #B8DCFA;   /* Breeze Blue */
  --blue-400:   #7FB8E5;   /* Horizon Blue */
  --blue-500:   #2070C4;   /* PostAir Blue */
  --blue-600:   #1A5FA8;   /* Deep Sky */
  --blue-700:   #12407A;   /* Night Sky */
  --blue-800:   #0A2B54;   /* Midnight */
  --blue-900:   #051A36;   /* Deep Midnight */
  --blue-950:   #020D1F;   /* Void */

  /* Ink Scale (cool neutrals) */
  --ink-50:     #E8F1FB;
  --ink-200:    #C2D4E5;
  --ink-400:    #6890AD;   /* placeholder — AA non-text 3:1 safe */
  --ink-600:    #4A6480;
  --ink-800:    #2A3E54;
  --ink-900:    #1A2B3C;
  --ink-950:    #0F1B2C;

  /* Semantic Hues */
  --green-400:  #1CA97C;
  --green-600:  #0A7A52;   /* darker for AA contrast on white */
  --amber-400:  #E07B00;
  --amber-600:  #A85400;   /* darker for AA contrast on white */
  --rose-400:   #D03060;
  --rose-600:   #A8214B;
  --violet-400: #7B6FD8;
  --violet-600: #5D52B8;

  --white:      #FFFFFF;
  --black:      #000000;


  /* ─── 2) SEMANTIC TOKENS — LIGHT MODE ────────────────────────────────── */

  /* Backgrounds */
  --bg:                 var(--blue-50);        /* App-Hintergrund */
  --bg-alt:             var(--blue-25);        /* Cards, Modals */
  --bg-hover:           var(--blue-100);       /* List-Item Hover */
  --surface:            var(--blue-200);       /* Sektion-Hintergrund */
  --overlay:            rgba(26, 43, 60, 0.5); /* Modal Backdrop */

  /* Borders */
  --border:             var(--blue-300);       /* Trennlinien (dekorativ) */
  --border-strong:      var(--blue-400);       /* Inputs, interaktive Borders */

  /* Text */
  --text:               var(--ink-900);        /* Fließtext */
  --text-muted:         var(--ink-600);        /* Labels, Sekundärtext */
  --text-faint:         var(--ink-400);        /* Placeholder, Hints */
  --text-on-primary:    var(--white);          /* Text auf primary Button */
  --text-on-solid:      var(--white);          /* Text auf solid-Variants */

  /* Primary (Buttons, Links, Highlights) */
  --primary:            var(--blue-500);
  --primary-hover:      var(--blue-600);
  --primary-active:     var(--blue-700);

  /* Semantik — leicht (für Icons, Akzente, Text auf hellem BG) */
  --success:            var(--green-400);
  --warning:            var(--amber-400);
  --error:              var(--rose-400);
  --feature:            var(--violet-400);

  /* Semantik — solid (für Buttons/Badges mit weißem Text — AA-konform) */
  --success-solid:      var(--green-600);
  --warning-solid:      var(--amber-600);
  --error-solid:        var(--rose-600);
  --feature-solid:      var(--violet-600);

  /* Focus & Elevation */
  --focus-ring:         0 0 0 3px rgba(32, 112, 196, 0.4);
  --shadow-sm:          0 1px 2px rgba(26, 43, 60, 0.06);
  --shadow-md:          0 4px 12px rgba(26, 43, 60, 0.08);
  --shadow-lg:          0 12px 32px rgba(26, 43, 60, 0.12);

  /* Radius (Bonus — gehört zum Token-System) */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-pill:        9999px;
}


/* ─── 3) DARK MODE ───────────────────────────────────────────────────── */

[data-theme="dark"] {
  /* Backgrounds — tiefes Nachthimmel-Blau statt schwarz */
  --bg:                 var(--blue-950);
  --bg-alt:             var(--blue-900);
  --bg-hover:           #0E2240;
  --surface:            var(--blue-800);
  --overlay:            rgba(0, 0, 0, 0.7);

  /* Borders */
  --border:             #1F3550;
  --border-strong:      #335577;

  /* Text */
  --text:               var(--ink-50);
  --text-muted:         #94B0CC;
  --text-faint:         #5C7A96;
  --text-on-primary:    var(--blue-950);     /* dunkler Text auf hellem Primary */
  --text-on-solid:      var(--white);

  /* Primary — heller, damit auf dunklem BG genug Kontrast bleibt */
  --primary:            #84BCEE;
  --primary-hover:      #A8D0F4;
  --primary-active:     #C5DEF8;

  /* Semantik — leicht (hellere Töne für Dark BG) */
  --success:            #4DD4A6;
  --warning:            #FFAA47;
  --error:              #FF6B92;
  --feature:            #A599E8;

  /* Semantik — solid (in Dark Mode reichen die 400er-Töne) */
  --success-solid:      var(--green-400);
  --warning-solid:      var(--amber-400);
  --error-solid:        var(--rose-400);
  --feature-solid:      var(--violet-400);

  /* Focus & Elevation */
  --focus-ring:         0 0 0 3px rgba(132, 188, 238, 0.5);
  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 12px 32px rgba(0, 0, 0, 0.6);
}


/* ─── 4) AUTO DARK MODE (optional) ───────────────────────────────────── */
/* Aktiviert Dark Mode automatisch nach OS-Einstellung,
   solange der User nicht explizit data-theme="light" gesetzt hat.
   Bei Bedarf den ganzen Block entfernen für rein manuelle Steuerung. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:               var(--blue-950);
    --bg-alt:           var(--blue-900);
    --bg-hover:         #0E2240;
    --surface:          var(--blue-800);
    --overlay:          rgba(0, 0, 0, 0.7);
    --border:           #1F3550;
    --border-strong:    #335577;
    --text:             var(--ink-50);
    --text-muted:       #94B0CC;
    --text-faint:       #5C7A96;
    --text-on-primary:  var(--blue-950);
    --primary:          #84BCEE;
    --primary-hover:    #A8D0F4;
    --primary-active:   #C5DEF8;
    --success:          #4DD4A6;
    --warning:          #FFAA47;
    --error:            #FF6B92;
    --feature:          #A599E8;
    --success-solid:    var(--green-400);
    --warning-solid:    var(--amber-400);
    --error-solid:      var(--rose-400);
    --feature-solid:    var(--violet-400);
    --focus-ring:       0 0 0 3px rgba(132, 188, 238, 0.5);
    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.6);
  }
}


/* ─── BASIS-STYLES (Beispiel-Anwendung) ──────────────────────────────── */

body {
  background: var(--bg);
  color: var(--text);
}

a, button.primary {
  color: var(--primary);
}

button.primary {
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
button.primary:hover  { background: var(--primary-hover); }
button.primary:active { background: var(--primary-active); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}