/* ==========================================================================
   Onmaro Aura · Tokens
   Klar wie ein gutes Betriebssystem: neutrale Grautöne, Hell und Dunkel
   (Dunkel als weiches Grau, nicht Schwarz), eine kräftige Systemfarbe pro App.
   Die Aurora-Farben gehören nur dem Onmaro-Logo.
   Apps setzen nur <html data-app="…">. Dokumentation: onmaro/DESIGN.md
   ========================================================================== */

:root {
  /* ---- Schrift: Systemschrift (SF Pro auf dem Mac) ------------------------ */
  --o-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --o-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif;
  --o-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  --o-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --o-display:  700 38px/1.1  var(--o-font-display);
  --o-title-1:  700 28px/1.15 var(--o-font-display);
  --o-title-2:  700 21px/1.25 var(--o-font-display);
  --o-title-3:  600 16.5px/1.3 var(--o-font-display);
  --o-headline: 600 14px/1.4  var(--o-font-text);
  --o-body:     400 14px/1.5  var(--o-font-text);
  --o-callout:  400 13px/1.45 var(--o-font-text);
  --o-subhead:  500 13px/1.4  var(--o-font-text);
  --o-footnote: 400 12px/1.4  var(--o-font-text);
  --o-caption:  600 11px/1.3  var(--o-font-text);
  --o-track-display: -0.022em;
  --o-track-title: -0.015em;
  --o-track-caption: 0.02em;

  /* ---- Raster (4-pt) ---------------------------------------------------- */
  --o-1: 4px;  --o-2: 8px;  --o-3: 12px; --o-4: 16px; --o-5: 20px;
  --o-6: 24px; --o-8: 32px; --o-10: 40px; --o-14: 56px; --o-18: 72px;

  /* ---- Rundungen ---------------------------------------------------------- */
  --o-r-xs: 6px; --o-r-s: 8px; --o-r-m: 10px; --o-r-l: 14px; --o-r-xl: 18px; --o-r-pane: 12px; --o-r-full: 999px;
  --o-gap: 8px;

  /* ---- Bewegung ---------------------------------------------------------- */
  --o-dur-1: 80ms;  --o-dur-2: 140ms; --o-dur-3: 200ms; --o-dur-4: 320ms; --o-dur-5: 520ms;
  --o-ease: cubic-bezier(.25, .1, .25, 1);
  --o-ease-spring: cubic-bezier(.3, 1.25, .5, 1);
  --o-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* ---- Marke: Aurora – nur im Onmaro-Logo -------------------------------- */
  --o-aurora-1: #7B61FF; --o-aurora-2: #D14BE6; --o-aurora-3: #FF7B5C;
  --o-aurora: linear-gradient(135deg, var(--o-aurora-1) 0%, var(--o-aurora-2) 55%, var(--o-aurora-3) 100%);
}

/* ---- Dunkel: weiches Graphit, nicht Schwarz ------------------------------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --o-canvas: #2A2A2D;                        /* Fenstergrund + Seitenleiste */
  --o-bg: #1F1F22;                            /* Inhaltsflächen (Liste, Lesen, Seiten) */
  --o-grouped: #1F1F22;
  --o-card: #2A2A2E;
  --o-surface: rgba(255, 255, 255, .05);
  --o-surface-2: rgba(255, 255, 255, .085);
  --o-surface-3: rgba(255, 255, 255, .13);
  --o-raised: #333337;
  --o-overlay: rgba(48, 48, 52, .94);
  --o-sunken: #19191B;
  --o-glass: rgba(31, 31, 34, .82);
  --o-line: rgba(255, 255, 255, .08);
  --o-line-strong: rgba(255, 255, 255, .14);
  --o-pane-edge: rgba(255, 255, 255, .07);
  --o-text: #F5F5F7;
  --o-text-2: #CFCFD4;
  --o-text-3: #9A9AA1;
  --o-text-4: #6C6C72;
  --o-positive: #30D158; --o-caution: #FF9F0A; --o-critical: #FF453A; --o-info: #64D2FF;
  --o-positive-bg: rgba(48, 209, 88, .15); --o-caution-bg: rgba(255, 159, 10, .15);
  --o-critical-bg: rgba(255, 69, 58, .15); --o-info-bg: rgba(100, 210, 255, .13);
  --o-shadow-1: 0 0 0 1px rgba(255, 255, 255, .05) inset;
  --o-shadow-2: 0 6px 18px rgba(0, 0, 0, .3);
  --o-shadow-3: 0 12px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .1);
  --o-shadow-4: 0 24px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
  --o-shadow-pane: 0 0 0 1px var(--o-pane-edge), 0 2px 12px rgba(0, 0, 0, .18);
  --o-scrim: rgba(0, 0, 0, .45);
  --o-icon-tile-1: #4A4A4F; --o-icon-tile-2: #343438; --o-icon-edge: rgba(255, 255, 255, .1);
  --o-glass-tile: #3A3A3F; --o-glass-frost: rgba(40, 40, 45, .22);
  /* Systemfarben */
  --o-blue: #0A84FF; --o-red: #FF453A; --o-pink: #FF375F; --o-orange: #FF9F0A; --o-yellow: #FFD60A;
  --o-green: #30D158; --o-teal: #40C8E0; --o-indigo: #5E5CE6; --o-purple: #BF5AF2; --o-gray: #8E8E93; --o-slate: #6B7A99;
  --o-data-1: #FF453A; --o-data-2: #0A84FF; --o-data-3: #FF9F0A; --o-data-4: #BF5AF2; --o-data-5: #30D158; --o-data-6: #8E8E93;
}

/* ---- Hell ---------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --o-canvas: #ECECEF;
  --o-bg: #FFFFFF;
  --o-grouped: #F5F5F7;
  --o-card: #FFFFFF;
  --o-surface: rgba(0, 0, 0, .035);
  --o-surface-2: rgba(0, 0, 0, .06);
  --o-surface-3: rgba(0, 0, 0, .1);
  --o-raised: #FFFFFF;
  --o-overlay: rgba(252, 252, 253, .95);
  --o-sunken: #F2F2F7;
  --o-glass: rgba(255, 255, 255, .82);
  --o-line: rgba(0, 0, 0, .08);
  --o-line-strong: rgba(0, 0, 0, .14);
  --o-pane-edge: rgba(0, 0, 0, .07);
  --o-text: #1D1D1F;
  --o-text-2: #3C3C43;
  --o-text-3: #86868B;
  --o-text-4: #AEAEB2;
  --o-positive: #248A3D; --o-caution: #C93400; --o-critical: #D70015; --o-info: #0071A4;
  --o-positive-bg: rgba(52, 199, 89, .12); --o-caution-bg: rgba(255, 149, 0, .13);
  --o-critical-bg: rgba(255, 59, 48, .1); --o-info-bg: rgba(0, 122, 255, .08);
  --o-shadow-1: 0 0 0 1px rgba(0, 0, 0, .06) inset;
  --o-shadow-2: 0 6px 18px rgba(0, 0, 0, .08);
  --o-shadow-3: 0 12px 40px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .08);
  --o-shadow-4: 0 24px 80px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08);
  --o-shadow-pane: 0 0 0 1px var(--o-pane-edge), 0 1px 6px rgba(0, 0, 0, .05);
  --o-scrim: rgba(0, 0, 0, .22);
  --o-icon-tile-1: #FFFFFF; --o-icon-tile-2: #ECECF0; --o-icon-edge: rgba(0, 0, 0, .1);
  --o-glass-tile: #E9E9EE; --o-glass-frost: rgba(255, 255, 255, .1);
  --o-blue: #007AFF; --o-red: #FF3B30; --o-pink: #FA2D48; --o-orange: #FF9500; --o-yellow: #E5A800;
  --o-green: #28A745; --o-teal: #30B0C7; --o-indigo: #5856D6; --o-purple: #AF52DE; --o-gray: #8E8E93; --o-slate: #4E5B75;
  --o-data-1: #FF3B30; --o-data-2: #007AFF; --o-data-3: #FF9500; --o-data-4: #AF52DE; --o-data-5: #34C759; --o-data-6: #8E8E93;
}

/* ---- Jede App hat ihre Farbe --------------------------------------------- */
:root                 { --o-accent: var(--o-blue); }    /* Onmaro (System) */
[data-app="post"]     { --o-accent: var(--o-blue); }    /* Post      · Blau   */
[data-app="notizen"]  { --o-accent: var(--o-yellow); }  /* Notizen   · Gelb   */
[data-app="musik"]    { --o-accent: var(--o-pink); }    /* Musik     · Rot    */
[data-app="kalender"] { --o-accent: var(--o-red); }     /* Kalender  · Rot    */
[data-app="finanzen"] { --o-accent: var(--o-green); }   /* Finanzen  · Grün   */
[data-app="fotos"]    { --o-accent: var(--o-indigo); }  /* Fotos     · Indigo */
[data-app="drive"]    { --o-accent: var(--o-indigo); }  /* Drive     · Indigo */
[data-app="kampagnen"] { --o-accent: var(--o-orange); } /* Kampagnen · Orange */
[data-app="kontakte"] { --o-accent: var(--o-teal); }     /* Kontakte  · Türkis */
[data-app="meet"]     { --o-accent: var(--o-green); }    /* Meet      · Grün   */
[data-app="memos"]    { --o-accent: var(--o-red); }      /* Memos     · Rot    */
[data-app="nachrichten"] { --o-accent: var(--o-green); } /* Nachrichten · Grün */
[data-app="tresor"]   { --o-accent: var(--o-slate); }    /* Tresor    · Graphit */
[data-app="cockpit"]  { --o-accent: var(--o-purple); }   /* Cockpit   · Violett */
[data-app="aufgaben"] { --o-accent: var(--o-orange); }  /* Aufgaben  · Orange */
:root {
  --o-accent-1: var(--o-accent);
  --o-accent-2: var(--o-accent);
  --o-accent-grad: linear-gradient(var(--o-accent), var(--o-accent));
  --o-accent-soft: color-mix(in srgb, var(--o-accent) 15%, transparent);
  --o-accent-select: var(--o-accent);
  --o-accent-ink: var(--o-accent);
  --o-on-accent: #FFFFFF;
  --o-focus: 0 0 0 3px color-mix(in srgb, var(--o-accent) 40%, transparent);
}
[data-app="notizen"] { --o-on-accent: #1D1D1F; --o-accent-ink: color-mix(in srgb, var(--o-accent) 70%, var(--o-text)); }