/*
 * Design Tokens — Aspirasi Aktual
 * Source: Desain Web Aspirasi Aktual/Senior News Website Design Brief/aspirasi-aktual-design-handoff/variables.css
 * Integrated directly from the canonical visual specification.
 */

:root {
  /* Core */
  --color-ivory: #F7F4EE;
  --color-paper: #FFFDFA;
  --color-ink: #171717;
  /* Softened ink for hover/secondary emphasis. Was referenced by
     search-overlay.css and visual-parity.css before it existed, so those
     declarations resolved to "invalid at computed-value time" and silently
     dropped the hover state; the literal fallback already in the codebase
     (#6f6b65) is promoted here to the single source of truth. */
  --color-ink-light: #6F6B65;
  --color-warm-gray: #6F6B65;
  --color-border: #DAD5CC;
  --color-burgundy: #9F1730;
  --color-burgundy-dark: #741123;
  --color-soft-burgundy: #F8E7EA;
  --color-canvas-edge: #E4E1D8;
  --color-section-warm: #EFEBE2;
  --color-muted: #9A968C;
  /* Dark surfaces */
  --dark-bg: #171717;
  --dark-line: #3A3A3A;
  --dark-text: #F7F5F0;
  /* State */
  --focus-ring: rgba(159,23,48,0.12);
  --state-selected: #F8E7EA;
  --state-danger: #9F1730;
  --state-warning: #B77932;
  /* Category pastel */
  --cat-nasional-bg: #EAF0F6;
  --cat-nasional-fg: #31506A;
  --cat-lokal-bg: #E7F2EC;
  --cat-lokal-fg: #356650;
  --cat-politik-bg: #F5E8EB;
  --cat-politik-fg: #8B2940;
  --cat-ekonomi-bg: #F6EEDF;
  --cat-ekonomi-fg: #805B25;
  --cat-pendidikan-bg: #EDE9F7;
  --cat-pendidikan-fg: #5E4B83;
  --cat-teknologi-bg: #E5F0F3;
  --cat-teknologi-fg: #326675;
  --cat-dunia-bg: #EBEDF4;
  --cat-dunia-fg: #48566F;
  --cat-olahraga-bg: #E8F3E4;
  --cat-olahraga-fg: #4B6F3E;
  --cat-gaya-hidup-bg: #F7E9EF;
  --cat-gaya-hidup-fg: #8A4563;
  --cat-sastra-bg: #F8E7EA;
  --cat-sastra-fg: #9F1730;
  --cat-opini-bg: #EEEAE4;
  --cat-opini-fg: #5E574E;
  --cat-video-bg: #F2E8E5;
  --cat-video-fg: #7C463B;

  /* Typography */
  --font-masthead: 'Playfair Display', serif;
  --font-serif: 'Source Serif 4', serif;
  --font-ui: 'Inter', sans-serif;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-h3: 21px; --fs-h2: 24px; --fs-h1: 34px; --fs-display: 46px; --fs-masthead: 56px;
  --lh-tight: 1.14; --lh-snug: 1.3; --lh-normal: 1.5; --lh-body: 1.75;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px;
  /* Radius / shadow / layout */
  --radius-sm: 6px; --radius-md: 8px; --radius-field: 10px; --radius-field-lg: 12px;
  --shadow-dropdown: 0 8px 24px rgba(23,23,23,0.08);
  --shadow-device: 0 20px 60px rgba(23,23,23,0.14);
  --page-max: 1520px; --container: 1360px; --reading-width: 720px;
  /* Transition / z-index */
  --t-fast: 140ms; --t-base: 180ms; --t-slow: 220ms; --ease-out: cubic-bezier(0.22,1,0.36,1);
  --z-nav: 120; --z-dropdown: 130; --z-overlay-backdrop: 400; --z-overlay: 401;
}

/*
 * Compatibility Mapping:
 * Maps the legacy WP theme.json preset variables to the new design tokens
 * to ensure that the existing UI (which relies on --wp--preset--*)
 * adopts the new visual language without a risky broad rewrite.
 */
:root {
  /* Colors */
  --wp--preset--color--paper: var(--color-ivory);
  --wp--preset--color--surface: var(--color-paper);
  --wp--preset--color--muted: var(--color-muted);
  --wp--preset--color--subtle: var(--color-section-warm);
  --wp--preset--color--text-muted: var(--color-warm-gray);
  --wp--preset--color--ink: var(--color-ink);
  --wp--preset--color--line: var(--color-border);
  --wp--preset--color--placeholder: var(--color-canvas-edge);
  --wp--preset--color--accent: var(--color-burgundy);
  --wp--preset--color--accent-dark: var(--color-burgundy-dark);
  --wp--preset--color--dark-surface: var(--dark-bg);
  --wp--preset--color--on-dark: var(--dark-text);

  /* Typography Families */
  --wp--preset--font-family--editorial-display: var(--font-masthead);
  --wp--preset--font-family--editorial-body: var(--font-serif);
  --wp--preset--font-family--interface: var(--font-ui);

  /* Font Sizes */
  --wp--preset--font-size--small: var(--fs-sm);
  --wp--preset--font-size--metadata: var(--fs-base);
  --wp--preset--font-size--body: var(--fs-lg);
  --wp--preset--font-size--lead: var(--fs-xl);
  --wp--preset--font-size--section-title: var(--fs-h3);
  --wp--preset--font-size--headline-small: var(--fs-h2);
  --wp--preset--font-size--headline-medium: var(--fs-h1);
  --wp--preset--font-size--headline-large: var(--fs-display);
  --wp--preset--font-size--display: var(--fs-masthead);

  /* Spacing */
  --wp--preset--spacing--2-xs: var(--sp-1);
  --wp--preset--spacing--xs: var(--sp-2);
  --wp--preset--spacing--sm: var(--sp-3);
  --wp--preset--spacing--md: var(--sp-4);
  --wp--preset--spacing--lg: var(--sp-6);
  --wp--preset--spacing--xl: var(--sp-8);
  --wp--preset--spacing--2-xl: var(--sp-10);
  --wp--preset--spacing--3-xl: var(--sp-14);
}