/*
 * Pearls of Quran — design tokens.
 * Brand colours are the exact values of the existing site and logo (white & gold).
 * Everything else (deep-sea navy, teal, aqua, pearl white, nacre shimmer, one warm accent) supports them.
 */
:root {
  /* ── Brand gold (from the original style.css and the logo artwork) ─────────────── */
  --gold-logo: #C38919;   /* logo fill */
  --gold-500: #CC9933;    /* --gold-primary */
  --gold-600: #A67B24;    /* --gold-dark */
  --gold-800: #745B0E;    /* --gold-deep */
  --gold-300: #E5C568;    /* --gold-border */
  --gold-50: #FDFBF5;     /* --gold-light */
  /* tints made from the brand gold */
  --gold-400: #D9AE4C;
  --gold-200: #F1DDA2;
  --gold-100: #F9EFD3;
  --gold-glow: rgba(204, 153, 51, .28);

  /* ── Supporting: the sea ──────────────────────────────────────────────────────── */
  --abyss: #030D1A;
  --deep-950: #051321;
  --deep-900: #071A2B;
  --deep-800: #0A2438;
  --deep-700: #0E3049;
  --deep-600: #133F5E;
  --deep-500: #1A5275;
  --teal-600: #0F6A7D;
  --teal-500: #1591A3;
  --aqua-400: #4FD1D9;
  --aqua-300: #86E3E6;
  --aqua-200: #B5F0F2;

  /* ── Supporting: pearl white + nacre shimmer ──────────────────────────────────── */
  --pearl-0: #FFFFFF;
  --pearl-50: #FBF8F1;
  --pearl-100: #F5F0E4;
  --pearl-200: #EAE2D1;
  --pearl-300: #D8CDB6;
  --nacre-pink: #F7C9D6;
  --nacre-aqua: #BFEFF0;
  --nacre-lilac: #D9CCF7;
  --nacre: linear-gradient(120deg, #FFFFFF 0%, #FBE6EE 28%, #DDF3F4 58%, #E9E0FA 82%, #FFF6DC 100%);

  /* ── One warm accent ──────────────────────────────────────────────────────────── */
  --coral: #FF7D5C;
  --coral-soft: #FFD3C6;

  /* ── Status ───────────────────────────────────────────────────────────────────── */
  --ok: #2FB88A;
  --ok-soft: rgba(47, 184, 138, .16);
  --danger: #E5484D;
  --danger-soft: rgba(229, 72, 77, .16);
  --warn: #F2A93B;
  --warn-soft: rgba(242, 169, 59, .18);
  --info: #4FA8E8;
  --info-soft: rgba(79, 168, 232, .16);

  /* ── Semantic (deep-sea theme is the default) ─────────────────────────────────── */
  color-scheme: dark;
  --bg: var(--deep-900);
  --bg-2: var(--deep-950);
  --surface: #0D293F;
  --surface-2: #113350;
  --surface-3: #164063;
  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .09);
  --line: rgba(181, 221, 236, .14);
  --line-strong: rgba(181, 221, 236, .26);
  --text: #F3F7FA;
  --text-soft: #B4C8D6;
  --text-mute: #7F99AB;
  --accent: var(--gold-300);
  --accent-strong: var(--gold-500);
  --accent-ink: #1B1303;          /* text on gold */
  --link: var(--gold-300);
  --focus: var(--gold-300);
  --field-bg: rgba(3, 13, 26, .45);
  --field-line: rgba(181, 221, 236, .24);
  --shadow-color: 2, 10, 20;

  /* ── Type ─────────────────────────────────────────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-quote: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-arabic: 'Amiri Quran', 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.2rem, 1.05rem + .6vw, 1.45rem);
  --fs-h4: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2.5vw, 3.4rem);
  --fs-h1: clamp(2.35rem, 1.4rem + 4.4vw, 5rem);
  --fs-mega: clamp(3rem, 1.4rem + 7.5vw, 8rem);

  /* ── Space, radius, shadow ────────────────────────────────────────────────────── */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --container: 1200px;
  --section-y: clamp(4rem, 9vw, 8rem);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(var(--shadow-color), .24), 0 4px 12px rgba(var(--shadow-color), .18);
  --shadow-2: 0 2px 6px rgba(var(--shadow-color), .26), 0 14px 34px rgba(var(--shadow-color), .3);
  --shadow-3: 0 6px 16px rgba(var(--shadow-color), .3), 0 30px 70px rgba(var(--shadow-color), .42);
  --shadow-gold: 0 8px 26px rgba(204, 153, 51, .32);

  /* ── Motion ───────────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .16s; --t-med: .28s; --t-slow: .6s;

  /* ── Layers ───────────────────────────────────────────────────────────────────── */
  --z-nav: 60; --z-float: 70; --z-modal: 100; --z-menu: 120; --z-toast: 140; --z-intro: 200;

  --logo-gold: var(--gold-logo);
  --logo-disc: #FBF8EF;
  --logo-ink: #16181B;
}

/* ── Pearl (light) theme: light sections of the website and the whole admin panel ─── */
[data-theme="pearl"] {
  color-scheme: light;
  --bg: var(--pearl-50);
  --bg-2: var(--pearl-100);
  --surface: #FFFFFF;
  --surface-2: #FBF7EE;
  --surface-3: #F3ECDC;
  --glass: rgba(10, 36, 56, .04);
  --glass-2: rgba(10, 36, 56, .07);
  --line: rgba(10, 36, 56, .1);
  --line-strong: rgba(10, 36, 56, .2);
  --text: #0B2236;
  --text-soft: #46596A;
  --text-mute: #74869A;
  --accent: var(--gold-600);
  --accent-strong: var(--gold-500);
  --link: var(--gold-800);
  --focus: var(--gold-600);
  --field-bg: #FFFFFF;
  --field-line: rgba(10, 36, 56, .22);
  --shadow-color: 40, 56, 80;
  --shadow-1: 0 1px 2px rgba(var(--shadow-color), .06), 0 4px 14px rgba(var(--shadow-color), .07);
  --shadow-2: 0 2px 6px rgba(var(--shadow-color), .07), 0 16px 38px rgba(var(--shadow-color), .11);
  --shadow-3: 0 8px 20px rgba(var(--shadow-color), .1), 0 34px 80px rgba(var(--shadow-color), .18);
  --ok: #13855F; --danger: #C9343A; --warn: #A96A08; --info: #1F73B7;
  --ok-soft: rgba(19, 133, 95, .1); --danger-soft: rgba(201, 52, 58, .09); --warn-soft: rgba(217, 139, 18, .14); --info-soft: rgba(31, 115, 183, .1);
  color: var(--text);
}
[data-theme="deep"] {
  color-scheme: dark;
  --bg: var(--deep-900); --bg-2: var(--deep-950); --surface: #0D293F; --surface-2: #113350; --surface-3: #164063;
  --glass: rgba(255, 255, 255, .055); --glass-2: rgba(255, 255, 255, .09);
  --line: rgba(181, 221, 236, .14); --line-strong: rgba(181, 221, 236, .26);
  --text: #F3F7FA; --text-soft: #B4C8D6; --text-mute: #7F99AB;
  --accent: var(--gold-300); --link: var(--gold-300); --focus: var(--gold-300);
  --field-bg: rgba(3, 13, 26, .45); --field-line: rgba(181, 221, 236, .24);
  --shadow-color: 2, 10, 20;
  --shadow-1: 0 1px 2px rgba(var(--shadow-color), .24), 0 4px 12px rgba(var(--shadow-color), .18);
  --shadow-2: 0 2px 6px rgba(var(--shadow-color), .26), 0 14px 34px rgba(var(--shadow-color), .3);
  --shadow-3: 0 6px 16px rgba(var(--shadow-color), .3), 0 30px 70px rgba(var(--shadow-color), .42);
  --ok: #2FB88A; --danger: #E5484D; --warn: #F2A93B; --info: #4FA8E8;
  --ok-soft: rgba(47, 184, 138, .16); --danger-soft: rgba(229, 72, 77, .16); --warn-soft: rgba(242, 169, 59, .18); --info-soft: rgba(79, 168, 232, .16);
  color: var(--text);
}