/* Hawsabah themes: LIGHT, OLD PAPER, DARK, scoped by <html data-theme="light|paper|dark">.
   Load after palette.css and fonts.css. With no attribute, the page is PAPER (the default theme).

   The values are the brand kit's three theme files merged into one file so a page can switch
   theme at runtime. Keep them identical to the kit; change a value there first.

   Roles (use these names in components, never raw hex):
     --bg --bg-alt --surface --page-bg         surfaces
     --heading --ink --ink-soft --rule          text and lines
     --brand --on-brand                          primary fill and the text on it
     --accent --accent-ink                       gold fill/rule, and gold that must carry text
     --link --focus --selection --shadow
     --plate --plate-pad --plate-radius          the parchment plate behind the mark (dark only)
     --plate-shadow                              shadow of that plate: none unless there is a plate
     --glow-a --glow-b                           soft background glows used by the hero

   Contrast: gold is a fill and rule color only. Where gold must carry text, use --accent-ink
   (bronze on light and paper, gold itself on the dark navy). */

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #FFFFFF;
  --bg-alt: #F6F4EE;
  --surface: #FFFFFF;
  --page-bg: var(--bg);

  --heading: var(--c-navy);
  --ink: #141A2B;
  --ink-soft: #4A5162;
  --rule: #DDD8CB;

  --brand: var(--c-navy);
  --on-brand: #FFFFFF;
  --accent: var(--c-gold);
  --accent-ink: var(--c-bronze);
  --link: var(--c-blue);
  --focus: var(--c-sky);

  --plate: transparent;
  --plate-pad: 0;
  --plate-radius: 0;
  --plate-shadow: none;

  --shadow: 0 1px 2px rgba(15, 34, 67, 0.06), 0 10px 28px rgba(15, 34, 67, 0.08);
  --selection: #CFE3F1;

  --glow-a: rgba(90, 162, 201, 0.20);
  --glow-b: rgba(228, 197, 140, 0.28);
}

:root,
:root[data-theme="paper"] {
  color-scheme: light;

  --bg: #F0E4C4;
  --bg-alt: #E6D8B2;
  --surface: #F7EED6;

  /* Grain + vignette + age spots over a warm base. Every page uses --page-bg so the paper is consistent. */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0 0.12 0 0 0 0.26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --page-bg:
    radial-gradient(ellipse at 50% 35%, rgba(255, 251, 238, 0.55), rgba(255, 251, 238, 0) 62%),
    radial-gradient(ellipse at 50% 50%, rgba(120, 84, 30, 0) 58%, rgba(120, 84, 30, 0.24) 100%),
    radial-gradient(circle at 9% 14%, rgba(122, 82, 28, 0.13) 0, rgba(122, 82, 28, 0) 4.5%),
    radial-gradient(circle at 88% 82%, rgba(122, 82, 28, 0.11) 0, rgba(122, 82, 28, 0) 5.5%),
    radial-gradient(circle at 74% 11%, rgba(122, 82, 28, 0.08) 0, rgba(122, 82, 28, 0) 3%),
    var(--paper-noise),
    linear-gradient(#F1E5C6, #EBDDB8);

  --heading: var(--c-navy);
  --ink: #2A2014;
  --ink-soft: #594832;
  --rule: #C8B587;

  --brand: var(--c-navy);
  --on-brand: #F7EED6;
  --accent: #C9A55A;
  --accent-ink: #634A1F;
  --link: #0B4F80;
  --focus: var(--c-blue);

  --plate: transparent;
  --plate-pad: 0;
  --plate-radius: 0;
  --plate-shadow: none;

  --shadow: 0 1px 2px rgba(60, 40, 10, 0.12), 0 12px 30px rgba(60, 40, 10, 0.18);
  --selection: #DCC98F;

  --glow-a: rgba(16, 95, 149, 0.12);
  --glow-b: rgba(201, 165, 90, 0.30);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0B1220;
  --bg-alt: #101A2E;
  --surface: #162238;
  --page-bg: var(--bg);

  --heading: #F3EFE6;
  --ink: #F3EFE6;
  --ink-soft: #B8C1D2;
  --rule: #27354F;

  --brand: var(--c-gold);
  --on-brand: #0B1220;
  --accent: var(--c-gold);
  --accent-ink: var(--c-gold);
  --link: #8DC3E3;
  --focus: var(--c-gold-bright);

  /* Dark mode uses the dark mark variant (parchment outlines), shown transparent with no plate. */
  --plate: transparent;
  --plate-pad: 0;
  --plate-radius: 0;
  --plate-shadow: none;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  --selection: #2B4A6B;

  --glow-a: rgba(16, 95, 149, 0.45);
  --glow-b: rgba(228, 197, 140, 0.12);
}

/* Dark mode shows the dark mark variant (parchment outlines) in place of the light mark. */
:root[data-theme="dark"] .mark-art img { content: url("../logo/hawsabah-mark-book-dark.svg"); }