/*
  loud.news Design System Tokens (D-060)
  Theme: Modern Tactile Cards (C) with Editorial Headings (A)
  Fonts: Onest (sans body/UI) + Source Serif 4 (serif headlines) with full Cyrillic & Latin support
  All text & meta elements strictly comply with WCAG AA contrast (>= 4.5:1)
*/

:root {
  /* ==========================================================================
     Colors: Light Theme (Default)
     ========================================================================== */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f5f9;
  --color-surface-hover: #e2e8f0;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-border-hover: #cbd5e1;

  /* Typography Colors (Checked: contrast >= 4.5:1 against #ffffff, #f8fafc, #f1f5f9) */
  --color-text-primary: #0f172a;    /* 17.8:1 on #ffffff, 17.1:1 on #f8fafc */
  --color-text-secondary: #334155;  /* 10.3:1 on #ffffff, 9.9:1 on #f8fafc, 9.4:1 on #f1f5f9 */
  --color-text-muted: #334155;      /* Guaranteed >= 4.5:1 across all surfaces */
  --color-text-inverse: #ffffff;

  /* Accent Colors */
  --color-accent: #4338ca;          /* Indigo-700: 7.9:1 on #ffffff, 7.5:1 on #f8fafc */
  --color-accent-hover: #3730a3;
  --color-accent-subtle: #e0e7ff;
  --color-accent-text: #ffffff;     /* 7.9:1 on #4338ca */

  /* ==========================================================================
     Semantic Loudness Scale: 4 Levels
     Level 1: 0–4.9  (Все / All)
     Level 2: 5–6.9  (Важное / Important)
     Level 3: 7–8.4  (Резонанс / Resonance)
     Level 4: 8.5–10 (Молния / Breaking)
     No gradients; solid semantic tint with text contrast >= 4.5:1
     ========================================================================== */
  /* Level 1: 0–4.9 */
  --loudness-1-color: #0369a1;      /* Sky-700: 5.9:1 on surface, 5.6:1 on bg */
  --loudness-1-bg: #f0f9ff;
  --loudness-1-border: #bae6fd;

  /* Level 2: 5–6.9 */
  --loudness-2-color: #9a3412;      /* Orange-800: 7.3:1 on surface, 6.9:1 on bg */
  --loudness-2-bg: #fff7ed;
  --loudness-2-border: #fed7aa;

  /* Level 3: 7–8.4 */
  --loudness-3-color: #6d28d9;      /* Purple-700: 7.1:1 on surface, 6.5:1 on bg */
  --loudness-3-bg: #f5f3ff;
  --loudness-3-border: #ddd6fe;

  /* Level 4: 8.5–10 */
  --loudness-4-color: #be123c;      /* Rose-700: 6.3:1 on surface, 5.7:1 on bg */
  --loudness-4-bg: #fff1f2;
  --loudness-4-border: #fecdd3;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --space-0_5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1_5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2_5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3_5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */

  /* ==========================================================================
     Radii
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 20px;
  --radius-full: 9999px;

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 10px 24px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Container Max Widths */
  --max-w-feed: 720px;
  --max-w-event: 680px;
  --max-w-showcase: 880px;
}

/* ==========================================================================
   Dark Theme (Media Query & [data-theme="dark"])
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0f19;
    --color-surface: #141b2d;
    --color-surface-subtle: #1c253b;
    --color-surface-hover: #242f49;
    --color-border: #242f49;
    --color-border-subtle: #1e263d;
    --color-border-hover: #384666;

    /* Typography Colors (Checked: contrast >= 4.5:1 against #0b0f19, #141b2d, #1c253b) */
    --color-text-primary: #f8fafc;    /* 18.3:1 on #0b0f19, 16.4:1 on #141b2d */
    --color-text-secondary: #94a3b8;  /* 7.5:1 on #0b0f19, 6.7:1 on #141b2d, 5.9:1 on #1c253b */
    --color-text-muted: #94a3b8;
    --color-text-inverse: #0f172a;

    --color-accent: #818cf8;          /* Indigo-400: 6.4:1 on #0b0f19, 5.7:1 on #141b2d, 5.1:1 on #1c253b */
    --color-accent-hover: #a5b4fc;
    --color-accent-subtle: #1e1e38;
    --color-accent-text: #0b0f19;     /* 6.4:1 on #818cf8 */

    /* Semantic Loudness Scale: Dark Theme */
    --loudness-1-color: #38bdf8;      /* Sky-400: 8.0:1 on surface, 6.6:1 on bg */
    --loudness-1-bg: #0c2d48;
    --loudness-1-border: #154c79;

    --loudness-2-color: #fb923c;      /* Orange-400: 7.6:1 on surface, 6.9:1 on bg */
    --loudness-2-bg: #431407;
    --loudness-2-border: #7c2d12;

    --loudness-3-color: #c084fc;      /* Purple-400: 6.5:1 on surface, 5.8:1 on bg */
    --loudness-3-bg: #2e1065;
    --loudness-3-border: #581c87;

    --loudness-4-color: #fb7185;      /* Rose-400: 6.4:1 on surface, 5.8:1 on bg */
    --loudness-4-bg: #4c0519;
    --loudness-4-border: #881337;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 10px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  }
}

[data-theme="dark"] {
  --color-bg: #0b0f19;
  --color-surface: #141b2d;
  --color-surface-subtle: #1c253b;
  --color-surface-hover: #242f49;
  --color-border: #242f49;
  --color-border-subtle: #1e263d;
  --color-border-hover: #384666;

  --color-text-primary: #f8fafc;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #0f172a;

  --color-accent: #818cf8;
  --color-accent-hover: #a5b4fc;
  --color-accent-subtle: #1e1e38;
  --color-accent-text: #0b0f19;

  --loudness-1-color: #38bdf8;
  --loudness-1-bg: #0c2d48;
  --loudness-1-border: #154c79;

  --loudness-2-color: #fb923c;
  --loudness-2-bg: #431407;
  --loudness-2-border: #7c2d12;

  --loudness-3-color: #c084fc;
  --loudness-3-bg: #2e1065;
  --loudness-3-border: #581c87;

  --loudness-4-color: #fb7185;
  --loudness-4-bg: #4c0519;
  --loudness-4-border: #881337;

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 10px 24px -4px rgba(0, 0, 0, 0.45), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f5f9;
  --color-surface-hover: #e2e8f0;
  --color-border: #e2e8f0;
  --color-border-subtle: #f1f5f9;
  --color-border-hover: #cbd5e1;

  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #334155;
  --color-text-inverse: #ffffff;

  --color-accent: #4338ca;
  --color-accent-hover: #3730a3;
  --color-accent-subtle: #e0e7ff;
  --color-accent-text: #ffffff;

  --loudness-1-color: #0369a1;
  --loudness-1-bg: #f0f9ff;
  --loudness-1-border: #bae6fd;

  --loudness-2-color: #9a3412;
  --loudness-2-bg: #fff7ed;
  --loudness-2-border: #fed7aa;

  --loudness-3-color: #6d28d9;
  --loudness-3-bg: #f5f3ff;
  --loudness-3-border: #ddd6fe;

  --loudness-4-color: #be123c;
  --loudness-4-bg: #fff1f2;
  --loudness-4-border: #fecdd3;

  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 10px 24px -4px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
}