/* ===== Campaign Monitor Dashboard - Human-Centered Design =====
 * Design Philosophy:
 * - Function over form
 * - Clarity over beauty
 * - Personality over perfection
 * - Direct and honest communication
 * - No AI gimmicks (gradients, shimmer, excessive animations)
 */

/* ===== Design Tokens ===== */
:root {
  /* Color System - More personality, less generic */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-success: #14b8a6;
  --color-success-bg: #ccfbf1;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-danger: #991b1b;
  --color-danger-bg: #fee2e2;
  --color-neutral: #64748b;

  /* Backgrounds - Solid, no gradients */
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --bg-subtle: #f1f5f9;

  /* Text - Clear hierarchy */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;

  /* Borders - Defined structure */
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-accent: #2563eb;

  /* Shadows - Subtle and functional */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Spacing - Consistent rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Typography - Readable and honest */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;

  /* Borders - Grid-aligned radii */
  --radius-sm: 4px;
  --radius-md: 8px; /* FIXED: was 6px (not 4px-aligned) */
  --radius-lg: 12px; /* Increased for better visual hierarchy */

  /* Transitions - Natural, not robotic */
  --transition-quick: 100ms ease-out;
  --transition-normal: 200ms ease-out;

  /* Glow Effects - gesetzt dynamisch durch glow.js (initGlow) */
  --glow-success: none;
  --glow-danger:  none;
  --glow-warning: none;
  --glow-ui:      none;  /* Neutrale UI-Boxen (Stat-Cards) */
  --glow-header:  none;  /* Header-Box */

  /* ===================================================
   * 8pt Grid System
   * Sources: spec.fm/specifics/8-pt-grid,
   *          Material Design spacing,
   *          Refactoring UI (Wathan & Schoger)
   *
   * Base unit (1u)  = 8px
   * Sub-grid        = 4px   (0.5u, for fine detail)
   * Column gutter   = 24px  (3u)
   * Layout margin   = 24px  (3u, matches --space-6)
   * Vertical rhythm = 8px   (baseline increment)
   *
   * Integer spacing: --sp-N where N×4px
   * Even N = strict 8pt | Odd N = 4pt sub-grid
   * =================================================== */

  /* Base grid tokens */
  --grid-unit:   8px;   /* 1u  – base unit */
  --grid-gutter: 24px;  /* 3u  – column gutter */
  --grid-margin: 24px;  /* 3u  – layout outer margin */
  --baseline:    8px;   /* vertical rhythm increment */

  /* Integer spacing scale (px, grid-snapped) */
  --sp-1:  4px;   /* 0.5u  sub-grid, fine detail   */
  --sp-2:  8px;   /* 1u                            */
  --sp-3: 12px;   /* 1.5u  sub-grid               */
  --sp-4: 16px;   /* 2u                            */
  --sp-5: 24px;   /* 3u                            */
  --sp-6: 32px;   /* 4u                            */
  --sp-7: 40px;   /* 5u                            */
  --sp-8: 48px;   /* 6u                            */
  --sp-9: 64px;   /* 8u                            */

  /* Tap-target component sizes (WCAG 2.5.5 ≥ 44px recommended) */
  --size-tap:    40px;  /* 5u  – primary interactive element  */
  --size-tap-sm: 32px;  /* 4u  – compact interactive element  */

  /* Baseline-aligned line heights
     Rule: smallest 8pt multiple ≥ font-size × 1.2
     (odd multiples of 4 accepted for sm/xl to avoid too-loose leading) */
  --lh-xs:   16px;  /* for  12px (text-xs)   → 2u  */
  --lh-sm:   20px;  /* for  14px (text-sm)   → 5×4 */
  --lh-base: 24px;  /* for  16px (text-base) → 3u  */
  --lh-lg:   24px;  /* for  18px (text-lg)   → 3u  */
  --lh-xl:   32px;  /* for  20px (text-xl)   → 4u  */
  --lh-2xl:  32px;  /* for  24px (text-2xl)  → 4u  */
  --lh-3xl:  40px;  /* for  32px (text-3xl)  → 5u  */
}

/* Dark Mode – Mitternachtsblau-Basis (neutral für alle Presets)
 * Hintergrund bleibt blau-kalt; Preset-Akzente liegen darüber.
 * Amber-Preset wechselt per JS zusätzlich bg-page/card/text via DARK_BASE.
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Default Accent – Periwinkle-Blau */
    --color-primary:       #8AA4FF;    /* Periwinkle-Blau – aufgehellt für bg-card     */
    --color-primary-hover: #A0BCFF;    /* Hover – heller                               */
    --color-success:       #5DD8BC;    /* Emerald-Türkis                               */
    --color-success-bg:    #0D2E24;    /* Tiefes Smaragd                               */
    --color-warning:       #EDD068;    /* Goldgelb                                     */
    --color-warning-bg:    #2A1D08;    /* Dunkles Bernstein                            */
    --color-danger:        #F07A76;    /* Korallrot                                    */
    --color-danger-bg:     #2C1010;    /* Tiefes Dunkelrot                             */
    --color-neutral:       #9AA4C0;    /* Bläuliches Schiefer                          */

    /* Background Hierarchy – Mitternachtsblau-Elevation */
    --bg-page:   #0D0F17;              /* Fundament: Mitternachtsblau-Anthrazit         */
    --bg-card:   #1A1E2C;              /* Elevation 1: klar abgesetzt                  */
    --bg-subtle: #252B40;              /* Elevation 2: Hover/Highlight sichtbar        */

    /* Typography – Lavendelweiß-Hierarchie (WCAG 2.1 Compliant) */
    --text-primary:   #E4E8F8;         /* Lavendelweiß – ~14:1 auf bg-page             */
    --text-secondary: #9AA4C0;         /* Bläuliches Silber – ~7:1                     */
    --text-tertiary:  #5C6480;         /* Mittleres Schiefer – ~4.5:1                  */

    /* Borders */
    --border-default: #2C3350;         /* Subtil sichtbar auf bg-card                  */
    --border-strong:  #3B4468;         /* Starker Trenner                              */
    --border-accent:  #8AA4FF;         /* Akzent-Border (passt zu primary)             */

    /* Shadows – Mitternachtsblau-Tint */
    --shadow-sm: 0 1px 3px 0 rgba(5, 8, 20, 0.70);
    --shadow-md: 0 4px 8px -1px rgba(5, 8, 20, 0.85);
    --shadow-lg: 0 10px 20px -3px rgba(5, 8, 20, 0.95);
  }
}