/* ============================================================
   HARAMAIN NEWS — Design System & Tokens
   Premium Islamic-inspired theme with dark mode + gold accents
   ============================================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Amiri:ital,wght@0,400;0,700;1,400&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Lora:ital,wght@0,500;0,600;0,700;1,500&display=swap');

/* --- Cascade Layers --- */
@layer reset, base, theme, components, utilities;

/* --- Reset --- */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    min-height: 100dvh;
    line-height: 1.6;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance;
    line-height: 1.2;
  }

  p {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
}

/* --- Base Design Tokens --- */
@layer base {
  :root {
    /* === Color Palette (Tier 1 — Literals) === */
    --color-gold-100: oklch(95% 0.05 85);
    --color-gold-200: oklch(88% 0.10 80);
    --color-gold-300: oklch(80% 0.14 75);
    --color-gold-400: oklch(72% 0.15 70);
    --color-gold-500: oklch(65% 0.14 65);
    --color-gold-600: oklch(55% 0.12 60);

    --color-emerald-100: oklch(95% 0.04 160);
    --color-emerald-200: oklch(85% 0.10 160);
    --color-emerald-300: oklch(70% 0.14 160);
    --color-emerald-400: oklch(55% 0.14 160);
    --color-emerald-500: oklch(45% 0.12 160);
    --color-emerald-600: oklch(35% 0.10 160);

    --color-navy-50: oklch(98% 0.005 250);
    --color-navy-100: oklch(95% 0.01 250);
    --color-navy-200: oklch(88% 0.02 250);
    --color-navy-700: oklch(30% 0.04 250);
    --color-navy-800: oklch(22% 0.03 250);
    --color-navy-850: oklch(18% 0.025 250);
    --color-navy-900: oklch(15% 0.02 250);
    --color-navy-950: oklch(10% 0.015 250);

    /* === Semantic Tokens (Tier 2) === */
    /* Darkened for text contrast on light bg (≈4.6:1 AA); dark mode keeps bright gold. */
    --color-accent-light: oklch(0.56 0.12 65);
    --color-accent-dark: var(--color-gold-300);
    --color-secondary-light: var(--color-emerald-500);
    --color-secondary-dark: var(--color-emerald-300);

    --color-bg-light: var(--color-navy-50);
    --color-bg-dark: var(--color-navy-950);
    --color-surface-light: #ffffff;
    --color-surface-dark: var(--color-navy-900);
    --color-surface-elevated-light: #ffffff;
    --color-surface-elevated-dark: var(--color-navy-850);
    --color-text-primary-light: var(--color-navy-900);
    --color-text-primary-dark: var(--color-navy-100);
    --color-text-secondary-light: oklch(50% 0.02 250);
    --color-text-secondary-dark: oklch(70% 0.02 250);
    --color-border-light: oklch(85% 0.01 250);
    --color-border-dark: oklch(32% 0.02 250);

    /* === Resolved Dynamic Tokens (Tier 3 — via light-dark) === */
    --color-accent: var(--color-accent-light);
    --color-secondary: var(--color-secondary-light);
    --color-bg: var(--color-bg-light);
    --color-surface: var(--color-surface-light);
    --color-surface-elevated: var(--color-surface-elevated-light);
    --color-text-primary: var(--color-text-primary-light);
    --color-text-secondary: var(--color-text-secondary-light);
    --color-border: var(--color-border-light);

    @media (prefers-color-scheme: dark) {
      --color-accent: var(--color-accent-dark);
      --color-secondary: var(--color-secondary-dark);
      --color-bg: var(--color-bg-dark);
      --color-surface: var(--color-surface-dark);
      --color-surface-elevated: var(--color-surface-elevated-dark);
      --color-text-primary: var(--color-text-primary-dark);
      --color-text-secondary: var(--color-text-secondary-dark);
      --color-border: var(--color-border-dark);
    }

    /* === Typography === */
    --font-latin: 'Inter', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
    /* Editorial news serif for Latin headlines; Arabic switches to Amiri below. */
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;

    --font-size-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --font-size-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --font-size-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --font-size-md: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
    --font-size-lg: clamp(1.15rem, 1rem + 0.75vw, 1.35rem);
    --font-size-xl: clamp(1.35rem, 1.1rem + 1.25vw, 1.75rem);
    --font-size-2xl: clamp(1.75rem, 1.3rem + 2.25vw, 2.5rem);
    --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --font-size-hero: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);

    /* === Spacing === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* === Borders & Radii === */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.06);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1), 0 2px 4px oklch(0% 0 0 / 0.06);
    --shadow-lg: 0 12px 40px oklch(0% 0 0 / 0.15), 0 4px 12px oklch(0% 0 0 / 0.08);
    --shadow-glow: 0 0 30px oklch(72% 0.15 70 / 0.2);

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Z-index === */
    --z-ticker: 10;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;

    /* === Layout === */
    --content-max-width: 1280px;
    --header-height: 4rem;

    /* Apply system color scheme */
    color-scheme: light dark;
  }

  /* === Base Body Styles === */
  body {
    font-family: var(--font-latin);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    transition: background-color var(--transition-slow), color var(--transition-slow);
  }

  /* Arabic font for Arabic content */
  html[lang="ar"] body {
    font-family: var(--font-arabic);
  }

  /* Arabic display headlines use the calligraphic Amiri instead of Playfair */
  html[lang="ar"] {
    --font-display: 'Amiri', 'Noto Naskh Arabic', serif;
  }

  /* Selection color */
  ::selection {
    background: oklch(72% 0.15 70 / 0.3);
    color: inherit;
  }

  /* Focus visible */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
}

/* --- Theme Overrides (for manual toggle) --- */
@layer theme {
  html.theme-dark {
    --color-accent: var(--color-accent-dark);
    --color-secondary: var(--color-secondary-dark);
    --color-bg: var(--color-bg-dark);
    --color-surface: var(--color-surface-dark);
    --color-surface-elevated: var(--color-surface-elevated-dark);
    --color-text-primary: var(--color-text-primary-dark);
    --color-text-secondary: var(--color-text-secondary-dark);
    --color-border: var(--color-border-dark);
  }

  html.theme-light {
    --color-accent: var(--color-accent-light);
    --color-secondary: var(--color-secondary-light);
    --color-bg: var(--color-bg-light);
    --color-surface: var(--color-surface-light);
    --color-surface-elevated: var(--color-surface-elevated-light);
    --color-text-primary: var(--color-text-primary-light);
    --color-text-secondary: var(--color-text-secondary-light);
    --color-border: var(--color-border-light);
  }
}

/* --- Utilities --- */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Skip link — visible only when focused (keyboard users) */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-md);
    top: -100%;
    z-index: 1000;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-accent);
    color: var(--color-navy-950);
    border-radius: var(--radius-sm);
    font-weight: 600;
  }

  .skip-link:focus {
    top: var(--space-sm);
  }

  .container {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--space-lg);
  }

  .text-accent {
    color: var(--color-accent);
  }

  .text-secondary {
    color: var(--color-text-secondary);
  }

  .font-display {
    font-family: var(--font-display);
  }
}