/* ==========================================================================
   tokens.css - the design system for ruya.social
   ==========================================================================

   Values come from the owner's brand guide (UI/UX/RULES). Where the guide left
   something open, the reasoning is written down so it can be argued with rather
   than guessed at later.

   Contrast is stated, not assumed. Every pair used for text is measured in
   scripts/check_contrast.py, which fails the build if a pair drops below its
   WCAG 2.2 target. The gold #C29B57 measures about 2.6:1 on ivory and therefore
   carries NO text in the light theme - it is reserved for rules, borders and
   iconography. On the dark ground it reaches about 6.9:1 and is allowed as text
   there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography

   Tajawal, self-hosted. The brand guide recommends Tajawal or Cairo and prefers
   Tajawal for long-form reading. It is NOT loaded from Google Fonts: this
   origin's CSP is 'self' only, and a webfont request would disclose every
   visitor's IP address to a third party.

   font-display: swap - text stays readable while the font loads. For a page
   whose entire purpose is reading, a blocking font is worse than a reflow.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajawal";
  src: url("/assets/fonts/Tajawal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (brand guide, section 1) --------------------------- */
  --brand-green: #166648;
  --brand-green-deep: #0f4a34;
  --brand-green-dark: #115239;
  --brand-green-light: #3fa97b;   /* dark-theme substitute, same hue, AA-safe */
  --brand-gold: #c29b57;
  --brand-gold-light: #d9bd88;
  --brand-navy: #2a4b7c;

  /* ---- Neutrals -------------------------------------------------------- */
  --ivory: #f9faf9;
  --white: #ffffff;
  --ink: #121a16;

  /* ---- Type ------------------------------------------------------------
     Arabic script carries a larger effective x-height than Latin at the same
     em size, and this page is meant to be read, so the base is 17px.

     A 1.25 modular scale. Every size on the page is a step on it; there are no
     arbitrary values. The display step is intentionally far above the rest -
     a hero that is only slightly larger than a subheading reads as timid, and
     the previous version of this page capped at 3.25rem, which on a wide
     viewport looked like body copy that had been bolded. */
  --font-body: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.5rem + 1.7vw, 2.75rem);
  --text-display: clamp(2.4rem, 1.5rem + 3.9vw, 4.25rem);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.95;    /* body copy; Arabic diacritics need the room */

  /* Arabic does not use letter-spacing for emphasis the way Latin does, and
     tightening it damages the joins between letters. Display text gets a very
     small negative track only because Tajawal sets its large sizes loosely. */
  --track-display: -0.015em;

  /* ---- Spacing ---------------------------------------------------------
     "Generous whitespace, to convey calm" - brand guide, section 2.
     One 4px-based scale; every gap on the page is a multiple of one unit. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section rhythm scales with the viewport so a phone does not inherit
     desktop-sized voids, which is what fixed 6rem padding produced. */
  --section-pad: clamp(var(--space-16), 10vw, var(--space-32));

  /* ---- Radii (brand guide, section 2: 6px-8px) ------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;    /* panels only; the guide's 6-8px is for controls */
  --radius-pill: 999px;

  /* ---- Layout ----------------------------------------------------------
     --header-h is consumed by scroll-padding-top in main.css. The sticky
     header would otherwise cover the top of any section reached by an anchor
     link, and would cover keyboard focus when it lands there - WCAG 2.2 AA
     "Focus Not Obscured (Minimum)". It is a token rather than a literal so the
     two can never drift apart. */
  --header-h: 64px;
  --container: 1140px;
  --measure: 66ch;      /* readable line length for prose */
  --measure-tight: 52ch;

  /* ---- Motion ----------------------------------------------------------
     Two durations, not one per component. Entrances decelerate; small state
     changes are quick and linear-ish. Duration is chosen per component, not
     copied from a single global value. */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 720ms;

  /* ---- Ornament --------------------------------------------------------
     The geometric motif from the base of the emblem, used as a watermark.
     The brand guide caps it at 3%-5%; this is 4.5% on light. The dark theme
     needs slightly more to be perceptible at all against #121A16. */
  --ornament-opacity: 0.045;
}

/* --------------------------------------------------------------------------
   Themes

   Components below this point reference semantic names only, never a brand
   colour directly, so re-theming is a change in one place.

   Light is the default so that a request with no JavaScript, no stored
   preference and no colour-scheme hint still renders correctly.
   -------------------------------------------------------------------------- */

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

  --bg: var(--ivory);
  --bg-raised: var(--white);
  --bg-sunken: #eef2f0;
  --bg-inverse: var(--ink);

  --fg: var(--ink);
  --fg-muted: #4a5a52;
  /* #6b7a72 was the first choice and measured 4.31:1 on ivory - under the 4.5
     AA floor. It is used for inactive navigation links, which are text, so it
     had to move. scripts/check_contrast.py is what caught it. */
  --fg-subtle: #637168;
  --fg-on-accent: var(--white);
  --fg-on-inverse: #e8ede9;

  --accent: var(--brand-green);
  --accent-hover: var(--brand-green-dark);
  --accent-soft: #e7f0eb;
  --accent-ring: rgb(22 102 72 / 35%);

  --gold: var(--brand-gold);
  --gold-line: rgb(194 155 87 / 45%);

  --line: #e1e7e4;
  --line-strong: #cdd6d1;

  --shadow-sm: 0 1px 2px rgb(18 26 22 / 5%), 0 2px 6px rgb(18 26 22 / 4%);
  --shadow-md: 0 4px 10px rgb(18 26 22 / 6%), 0 14px 34px rgb(18 26 22 / 7%);
  --shadow-lg: 0 8px 20px rgb(18 26 22 / 8%), 0 28px 64px rgb(18 26 22 / 10%);

  --glow: radial-gradient(closest-side, rgb(22 102 72 / 8%), transparent 70%);
}

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

  --bg: var(--ink);
  --bg-raised: #182320;
  --bg-sunken: #0d1310;
  --bg-inverse: #0a0f0c;

  --fg: #e9efeb;
  --fg-muted: #adbcb4;
  --fg-subtle: #8b9a92;
  --fg-on-accent: #06120c;
  --fg-on-inverse: #e9efeb;

  --accent: var(--brand-green-light);
  --accent-hover: #5cc094;
  --accent-soft: #15281f;
  --accent-ring: rgb(63 169 123 / 45%);

  --gold: var(--brand-gold-light);
  --gold-line: rgb(217 189 136 / 40%);

  --line: #253430;
  --line-strong: #33453f;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 26%);
  --shadow-md: 0 4px 10px rgb(0 0 0 / 44%), 0 14px 34px rgb(0 0 0 / 34%);
  --shadow-lg: 0 8px 20px rgb(0 0 0 / 50%), 0 28px 64px rgb(0 0 0 / 42%);

  --glow: radial-gradient(closest-side, rgb(63 169 123 / 10%), transparent 70%);

  --ornament-opacity: 0.06;
}

/* A visitor who has never used the toggle gets their operating system's
   preference. `:root:not([data-theme])` means an explicit choice always wins,
   because the toggle writes data-theme onto <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: var(--ink);
    --bg-raised: #182320;
    --bg-sunken: #0d1310;
    --bg-inverse: #0a0f0c;

    --fg: #e9efeb;
    --fg-muted: #adbcb4;
    --fg-subtle: #8b9a92;
    --fg-on-accent: #06120c;
    --fg-on-inverse: #e9efeb;

    --accent: var(--brand-green-light);
    --accent-hover: #5cc094;
    --accent-soft: #15281f;
    --accent-ring: rgb(63 169 123 / 45%);

    --gold: var(--brand-gold-light);
    --gold-line: rgb(217 189 136 / 40%);

    --line: #253430;
    --line-strong: #33453f;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px rgb(0 0 0 / 26%);
    --shadow-md: 0 4px 10px rgb(0 0 0 / 44%), 0 14px 34px rgb(0 0 0 / 34%);
    --shadow-lg: 0 8px 20px rgb(0 0 0 / 50%), 0 28px 64px rgb(0 0 0 / 42%);

    --glow: radial-gradient(closest-side, rgb(63 169 123 / 10%), transparent 70%);

    --ornament-opacity: 0.06;
  }
}