/* ===========================================
   NewsMath CSS Custom Properties (Design Tokens)
   =========================================== */

:root {

  /* ----- Container & Layout ----- */
  --container-max-width: 1100px;
  --container-padding: 16px;
  --container-padding-desktop: 32px;
  --sidebar-width: 320px;
  --ads-rail-width: 160px;
  --ads-rail-sticky-top: 181px;
  --ads-below-nav-width: 970px;
  --logo-max-height: 40px;

  /* ----- Spacing ----- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ----- Colors - Brand ----- */
  --newsmath-primary: #131373;
  --color-primary: #131373;
  --color-accent: #f97316;
  --color-red: #d32f2f;
  --color-dark: #222;
  --color-white: #fff;
  --color-bg: #f4f4f4;
  --color-border: #e0e0e0;
  --color-gradient-start: #1a3fd6;
  --color-gradient-mid: #7a2fd6;
  --color-gradient-end: #e07b1a;
  --color-breaking-bg: #1a3fd6;
  --color-luxury-gold: #c9a24b;
  --color-luxury-gold-light: #e8cd8a;

  /* ----- Colors - Widget Jadwal Sholat & Cuaca ----- */
  --color-widget-bg-start: #14143c;
  --color-widget-bg-end: #0c0c26;
  --color-widget-gold: #c9a24b;
  --color-widget-gold-rgb: 201, 162, 75;
  --color-widget-gold-light: #e8cd8a;
  --color-widget-gold-light-rgb: 232, 205, 138;

  /* ----- Colors - Text & Grays ----- */
  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-text-light: #888;
  --color-text-lighter: #aaa;
  --color-border-light: #eee;
  --color-bg-subtle: #f5f5f5;

  /* ----- Colors - Shadow & Overlay ----- */
  --color-shadow: rgba(0,0,0,.08);
  --color-overlay-dark: rgba(0,0,0,.3);
  --shadow-card: 0 1px 3px rgba(0,0,0,.08);

  /* ----- Typography - Font Family ----- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-header: var(--font-sans);
  --font-footer: var(--font-sans);

  /* ----- Typography - Font Size (body/UI) ----- */
  --font-size-2xs: .82rem;
  --font-size-xs: .85rem;
  --font-size-sm: .88rem;
  --font-size-md: .9rem;

  /* ----- Typography - Heading Scale (judul berita) ----- */
  --h1-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --h2-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --h3-size: 1rem;

  /* ----- Border Radius ----- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 50%;

  /* ----- Opacity ----- */
  --opacity-hover: .85;
  --opacity-muted: .9;

  /* ----- Aspect Ratio ----- */
  --aspect-thumb-square: 100/75;
  --aspect-thumb-wide: 233/139;

  /* ----- Breakpoints (reference only — hardcode value tetap dipakai di dalam @media) ----- */
  --bp-desktop: 1024px;
  --bp-tablet: 1023px;
  --bp-mobile: 767px;
  --bp-wide: 1360px;

}