/*
  Design tokens. One markup, two themes:
    light = «مجلّة» (day magazine)   dark = «ليل» (night reading)
  Components in theme.css use these variables only.
  The theme is chosen by <html data-theme="light|dark">; without the attribute the OS preference applies.
*/

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

  /* surfaces and text */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f3ea;
  --ink: #101010;
  --muted: #55524b;
  --rule: #101010;            /* 2px solid black rules */
  --rule-width: 2px;
  --hairline: #d9d4c4;

  /* brand */
  --saffron: #f4b400;
  --cobalt: #1f3fd1;
  --coral: #f0506e;
  --pine: #0e5e4b;
  --accent: var(--saffron);
  --on-accent: #101010;
  --link: var(--cobalt);
  --focus: #1f3fd1;

  /* shape */
  --radius: 0;
  --radius-card: 0;
  --shadow-card: 12px 12px 0 var(--ink);   /* hard offset */
  --shadow-hover: 6px 6px 0 var(--ink);

  /* type */
  --font-display: "Lalezar", "Noto Naskh Arabic", serif;
  --font-body: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
  --font-ui: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --body-size: 20px;
  --body-leading: 2.05;

  /* hero */
  --hero-bg: var(--saffron);
  --hero-ink: #101010;
  --topbar-bg: #101010;
  --topbar-ink: #ffffff;
  --footer-bg: #101010;
  --footer-ink: #f3efe4;

  /* category colours (index = category id % 8 + 1) and the text colour that sits on them */
  --cat-1: #f4b400;  --on-cat-1: #101010;
  --cat-2: #1f3fd1;  --on-cat-2: #ffffff;
  --cat-3: #f0506e;  --on-cat-3: #101010;
  --cat-4: #0e5e4b;  --on-cat-4: #ffffff;
  --cat-5: #6a2fd6;  --on-cat-5: #ffffff;
  --cat-6: #e85d04;  --on-cat-6: #101010;
  --cat-7: #007c89;  --on-cat-7: #ffffff;
  --cat-8: #b3125a;  --on-cat-8: #ffffff;
}

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

  --bg: #07080d;
  --surface: #0e1019;
  --surface-2: #141725;
  --ink: #f1ebdd;
  --muted: #b3ad9f;
  --rule: rgba(241, 235, 221, 0.16);   /* 1px hairlines */
  --rule-width: 1px;
  --hairline: rgba(241, 235, 221, 0.12);

  --gold: #e3b45c;
  --teal: #3fb7a6;
  --plum: #8c4fd1;
  --accent: var(--gold);
  --on-accent: #07080d;
  --link: var(--gold);
  --focus: #e3b45c;

  --radius: 14px;
  --radius-card: 20px;
  --shadow-card: 0 0 0 1px var(--hairline), 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 0 0 1px rgba(227, 180, 92, 0.45), 0 0 36px rgba(227, 180, 92, 0.18);

  --font-display: "Aref Ruqaa", "Noto Naskh Arabic", serif;
  --body-size: 21px;
  --body-leading: 2.1;

  --hero-bg: #07080d;
  --hero-ink: #f1ebdd;
  --topbar-bg: #0e1019;
  --topbar-ink: #b3ad9f;
  --footer-bg: #0e1019;
  --footer-ink: #d8d2c4;

  --cat-1: #e3b45c;  --on-cat-1: #07080d;
  --cat-2: #3fb7a6;  --on-cat-2: #07080d;
  --cat-3: #8c4fd1;  --on-cat-3: #ffffff;
  --cat-4: #d96c8c;  --on-cat-4: #07080d;
  --cat-5: #5b8def;  --on-cat-5: #07080d;
  --cat-6: #e58a4b;  --on-cat-6: #07080d;
  --cat-7: #6fcf97;  --on-cat-7: #07080d;
  --cat-8: #b07cff;  --on-cat-8: #07080d;
}

/* No attribute (no JavaScript): follow the OS preference with the same dark tokens */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #07080d; --surface: #0e1019; --surface-2: #141725; --ink: #f1ebdd; --muted: #b3ad9f;
    --rule: rgba(241, 235, 221, 0.16); --rule-width: 1px; --hairline: rgba(241, 235, 221, 0.12);
    --gold: #e3b45c; --teal: #3fb7a6; --plum: #8c4fd1;
    --accent: #e3b45c; --on-accent: #07080d; --link: #e3b45c; --focus: #e3b45c;
    --radius: 14px; --radius-card: 20px;
    --shadow-card: 0 0 0 1px var(--hairline), 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 0 0 1px rgba(227, 180, 92, 0.45), 0 0 36px rgba(227, 180, 92, 0.18);
    --font-display: "Aref Ruqaa", "Noto Naskh Arabic", serif;
    --body-size: 21px; --body-leading: 2.1;
    --hero-bg: #07080d; --hero-ink: #f1ebdd; --topbar-bg: #0e1019; --topbar-ink: #b3ad9f;
    --footer-bg: #0e1019; --footer-ink: #d8d2c4;
    --cat-1: #e3b45c; --on-cat-1: #07080d; --cat-2: #3fb7a6; --on-cat-2: #07080d;
    --cat-3: #8c4fd1; --on-cat-3: #ffffff; --cat-4: #d96c8c; --on-cat-4: #07080d;
    --cat-5: #5b8def; --on-cat-5: #07080d; --cat-6: #e58a4b; --on-cat-6: #07080d;
    --cat-7: #6fcf97; --on-cat-7: #07080d; --cat-8: #b07cff; --on-cat-8: #07080d;
  }
}