/**
 * MADIUNPEDIA — DESIGN TOKENS
 * Suara Warga Madiun
 * PT Media Merdeka Berkarya
 * Themes: Dark (Default/System) & Light
 * Typography: Coolvetica (Headings) & Inter (Body)
 */

@import url('https://fonts.cdnfonts.com/css/coolvetica');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Theme identifier */
  --current-theme: 'dark';

  /* ==========================================================================
     Colors — Dark Mode (Default)
     ========================================================================== */
  --color-void: #0b0c0e;        /* Deepest canvas */
  --color-graphite: #131416;    /* Card surface */
  --color-charcoal: #1f1f21;    /* Secondary surface, inputs */
  --color-smoke: #3c3d3e;       /* Dividers */
  --color-steel: #71717a;       /* Muted text */
  --color-fog: #858687;         /* Secondary text */
  --color-ash: #9d9e9f;         /* Tertiary */
  --color-chalk: #cececf;       /* Body secondary */
  --color-snow: #ffffff;        /* Primary headings */
  --color-bone: #f2f2f2;        /* Primary action button fill */
  --color-ink: #111111;         /* Text inside primary button */

  /* Chromatic Accents */
  --color-signal-blue: #3b82f6;
  --color-arc-blue: #60a5fa;
  --color-ring-blue: #93c5fd;
  --color-mint: #4ade80;
  --color-fern: #22c55e;
  --color-coral: #f87171;
  --color-ember: #ea580c;
  --color-iris: #314ef0;

  /* Surfaces */
  --surface-void: #0b0c0e;
  --surface-graphite: #131416;
  --surface-charcoal: #1f1f21;
  --surface-soft-fill: rgba(255, 255, 255, 0.059);
  --surface-header: rgba(11, 12, 14, 0.88);
  --surface-footer: #111215;

  /* Hairlines & Borders */
  --border-hairline: 0.5px solid rgba(255, 255, 255, 0.08);
  --border-hairline-subtle: 0.5px solid rgba(255, 255, 255, 0.05);
  --border-hairline-hover: 0.5px solid rgba(255, 255, 255, 0.18);
  --border-hairline-blue: 0.5px solid rgba(59, 130, 246, 0.4);

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 4px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  --shadow-subtle-3: rgba(59, 130, 246, 0.25) 0px 0px 0px 1.5px;
  --shadow-sm-5: rgba(34, 197, 94, 0.55) 0px 0px 4px 0px;
  --shadow-sm-6: rgba(59, 130, 246, 0.55) 0px 0px 4px 0px;
  --elevation-card: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 20px 44px rgba(0, 0, 0, 0.14), 0 4px 10px rgba(0, 0, 0, 0.08);
  --elevation-panel: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 0.5px rgba(255, 255, 255, 0.07), 0 16px 36px rgba(0, 0, 0, 0.12);
  --elevation-button-primary: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);

  /* Logo filter: default none for white logo */
  --logo-filter: none;

  /* ==========================================================================
     Typography
     ========================================================================== */
  /* Coolvetica for all titles & headings */
  --font-title: 'Coolvetica', 'Coolvetica Rg', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Typography Scale */
  --text-body-xs: 11px;
  --leading-body-xs: 1.36;
  --text-body-sm: 12px;
  --leading-body-sm: 1.47;
  --text-body-md: 13px;
  --leading-body-md: 1.5;
  --text-body-lg: 14px;
  --leading-body-lg: 1.43;
  --tracking-body-lg: -0.25px;
  --text-body-xl: 16px;
  --leading-body-xl: 1.55;
  --text-subheading: 18px;
  --leading-subheading: 1.35;
  --tracking-subheading: -0.4px;

  /* Headlines */
  --text-heading: 30px;
  --leading-heading: 1.15;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.1;
  --text-display: 48px;
  --leading-display: 1.05;
  --text-display-lg: 60px;
  --leading-display-lg: 0.96;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Layout */
  --page-max-width: 1120px;
  --section-gap: 80px;
  --card-padding: 24px;
  --card-padding-lg: 32px;
  --nav-height: 72px;

  /* Radius */
  --radius-xs: 5.26px;
  --radius-sm: 8.77px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pills: 10px;
  --radius-cards: 12px;
  --radius-full: 9999px;
}

/* ==========================================================================
   Light Mode Theme Tokens
   Activated when [data-theme="light"] is set on <html>
   ========================================================================== */
:root[data-theme="light"] {
  --current-theme: 'light';

  /* Colors — Crisp Light */
  --color-void: #f8f9fa;        /* Clean light grey-white canvas */
  --color-graphite: #ffffff;    /* Pure white elevated cards */
  --color-charcoal: #edf0f5;    /* Secondary surface & input fills */
  --color-smoke: #e2e5eb;       /* Dividers */
  --color-steel: #64748b;       /* Muted text */
  --color-fog: #475569;         /* Secondary text */
  --color-ash: #94a3b8;         /* Tertiary / placeholders */
  --color-chalk: #1e293b;       /* Body secondary */
  --color-snow: #090d16;        /* Headings (dark ink) */
  --color-bone: #090d16;        /* High-contrast dark button on light canvas */
  --color-ink: #ffffff;         /* Text inside bone button */

  /* Chromatic Accents */
  --color-signal-blue: #2563eb;
  --color-arc-blue: #1d4ed8;
  --color-ring-blue: #bfdbfe;
  --color-mint: #16a34a;
  --color-fern: #15803d;
  --color-coral: #dc2626;
  --color-ember: #ea580c;

  /* Surfaces */
  --surface-void: #f8f9fa;
  --surface-graphite: #ffffff;
  --surface-charcoal: #edf0f5;
  --surface-soft-fill: rgba(0, 0, 0, 0.04);
  --surface-header: rgba(248, 249, 250, 0.88);
  --surface-footer: #edf0f5;

  /* Hairlines & Borders */
  --border-hairline: 0.5px solid rgba(0, 0, 0, 0.09);
  --border-hairline-subtle: 0.5px solid rgba(0, 0, 0, 0.06);
  --border-hairline-hover: 0.5px solid rgba(0, 0, 0, 0.2);
  --border-hairline-blue: 0.5px solid rgba(37, 99, 235, 0.4);

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 3px 0px, rgba(0, 0, 0, 0.05) 0px 0px 1px 0px;
  --shadow-subtle-3: rgba(37, 99, 235, 0.2) 0px 0px 0px 2px;
  --elevation-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 24px rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --elevation-panel: 0 1px 3px rgba(0, 0, 0, 0.05), 0 16px 36px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --elevation-button-primary: 0 2px 4px rgba(0, 0, 0, 0.12);

  /* Logo filter: invert white logo to dark in light mode */
  --logo-filter: invert(1) brightness(0.2);
}