/**
 * ==========================================================================
 * ACCR Modern Broadsheet Editorial Design System - Tokens & Variables
 * Inspired by Asharq Al-Awsat (aawsat.com), Reuters, and BBC Arabic
 * Built with ui-ux-pro-max-skill: Density (3/10 Spacious) & Variance (4/10 Balanced)
 * ==========================================================================
 */

:root {
  /* ---------------------------------------------------------
   * 1. Deep Slate / Editorial Navy Color Palette
   * --------------------------------------------------------- */
  --background: #ffffff;         /* Pure open white canvas */
  --foreground: #0f172a;         /* Deep ink charcoal for headlines */

  --card: #ffffff;               /* Clean white surface */
  --card-foreground: #0f172a;    /* Text on card */
  --card-subtle: #f8fafc;        /* Subtle slate-50 alternate background */

  --popover: #ffffff;
  --popover-foreground: #0f172a;

  /* Primary Editorial Navy */
  --primary: #0b2545;            /* Deep Editorial Navy (Reuters / Think Tank standard) */
  --primary-foreground: #ffffff;
  --primary-hover: #133660;      /* Slightly lighter navy */
  --primary-active: #07182c;     /* Deep midnight navy */
  --primary-subtle: #f0f4f8;     /* Soft slate tint */
  --primary-border: #cbd5e1;     /* Soft border */

  /* Neutral Slate Grayscale */
  --secondary: #f8fafc;          /* slate-50 */
  --secondary-foreground: #0f172a;
  --secondary-hover: #f1f5f9;    /* slate-100 */

  --muted: #f8fafc;              /* slate-50 */
  --muted-foreground: #64748b;   /* slate-500 - Timestamps & meta */

  /* Accent & Alert (Breaking News) */
  --accent: #0b2545;             /* Authoritative navy */
  --accent-foreground: #ffffff;
  --accent-light: #f0f4f8;
  --accent-gold: #b45309;        /* Warm subtle bronze/gold for featured badges */

  --destructive: #dc2626;        /* Editorial Breaking Red */
  --destructive-foreground: #ffffff;
  --destructive-subtle: #fef2f2;

  /* Hairlines & Borders (Broadsheet Dividers) */
  --border: #e2e8f0;             /* slate-200 - 1px Hairline divider */
  --border-subtle: #f1f5f9;      /* slate-100 */
  --border-strong: #cbd5e1;      /* slate-300 */
  --border-light: #e2e8f0;       /* Compatibility alias */
  --brand-primary: #0b2545;      /* Compatibility alias */
  --brand-dark: #07182c;         /* Compatibility alias */
  --input: #e2e8f0;              /* Form field border */
  --ring: #0b2545;               /* Focus ring */

  /* Editorial Radii (Minimalist / Crisp Newspaper Architecture) */
  --radius: 3px;                 /* Crisp, barely-rounded editorial corners */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------
   * 2. Semantic Broadsheet & Section Tokens
   * --------------------------------------------------------- */
  --bg-page: var(--background);
  --bg-surface: var(--card);
  --bg-surface-subtle: #f8fafc;
  --bg-surface-pearl: #f4f6f9;
  --bg-surface-dark: #07182c;    /* Deep navy for multimedia / podcast block */
  --bg-surface-dark-card: #0d223d;

  --brand-primary: var(--primary);
  --brand-primary-hover: var(--primary-hover);
  --brand-dark: #07182c;
  --brand-deep: #05101f;
  --brand-light: var(--primary-subtle);
  --brand-light-hover: #e2eaf2;
  --brand-border: #cbd5e1;

  /* Thematic Section Badges - Editorial Precision */
  --theme-news: #0b2545;
  --theme-news-bg: #f0f4f8;
  --theme-studies: #0f2e4a;
  --theme-studies-bg: #f0f4f8;
  --theme-seminars: #1e3a5f;
  --theme-seminars-bg: #f1f5f9;
  --theme-concepts: #0284c7;
  --theme-concepts-bg: #f0f9ff;
  --theme-issues: #334155;
  --theme-issues-bg: #f8fafc;
  --theme-opinions: #0b2545;
  --theme-opinions-bg: #f0f4f8;
  --theme-books: #07182c;
  --theme-books-bg: #f8fafc;

  /* Typography Colors */
  --text-ink: #0f172a;           /* Pure dark slate for headlines */
  --text-primary: #1e293b;
  --text-secondary: #334155;     /* Noto Naskh body color */
  --text-muted: #64748b;         /* Meta and date info */
  --text-inverse: #ffffff;

  /* Hairlines & Borders */
  --hairline: 1px solid var(--border);
  --hairline-subtle: 1px solid var(--border-subtle);
  --hairline-strong: 1px solid var(--border-strong);

  /* ---------------------------------------------------------
   * 3. Dual-Font Typography Architecture (ui-ux-pro-max)
   * Display/UI: IBM Plex Sans Arabic | Reading/Body: Noto Naskh Arabic
   * --------------------------------------------------------- */
  --font-editorial: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-display: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  --font-body: 'Noto Naskh Arabic', 'Traditional Arabic', serif, system-ui, sans-serif;
  --font-reading: 'Noto Naskh Arabic', 'Traditional Arabic', serif, system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Line Heights for Supreme Eye Comfort */
  --lh-tight: 1.25;
  --lh-snug: 1.38;
  --lh-normal: 1.55;
  --lh-relaxed: 1.85;           /* Comfortable body reading */
  --lh-loose: 2.05;

  /* Font Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Font Sizes - Broadsheet Scale */
  --text-2xs: 0.75rem;    /* 12px */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.375rem;   /* 38px */
  --text-4xl: 2.875rem;   /* 46px */

  /* ---------------------------------------------------------
   * 4. Spacious Scale (ui-ux-pro-max Density Dial: 3/10)
   * --------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 28px;
  --space-xl: 40px;
  --space-2xl: 56px;
  --space-3xl: 72px;
  --space-4xl: 96px;

  /* Container Widths */
  --container-max: 1320px;
  --container-reading: 760px;
  --container-gutter: 2rem;

  /* Ultra-Subtle Editorial Shadows (Clean separation via whitespace) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --shadow-card: none;           /* Open card structure without boxed shadow */
  --shadow-hover: 0 6px 16px -4px rgba(11, 37, 69, 0.07);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.07);
  --shadow-book: -6px 8px 20px -3px rgba(7, 24, 44, 0.22);

  /* Micro-transitions (ui-ux-pro-max Motion Dial: 2/10) */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.22s ease;
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}