/* Riquo brand tokens. Source of truth: design/brand/BRAND.md (v0.1 draft, 6 Nov 2026).
   Every semantic text/background pair is listed with its WCAG 2.x ratio in BRAND.md section 5
   and is asserted by: node scripts/check-contrast.mjs public/brand-tokens.css */

/* Fonts. The only place the brand fonts are loaded (BRAND.md section 6). Weights requested are exactly the
   weights used: Bricolage 600/700, Figtree 400/600, IBM Plex Sans Arabic 400/600/700. Swap this line for
   self-hosted @font-face rules if the owner prefers (decision 5). If the request fails, the fallbacks apply. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Figtree:wght@400;600&family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap");

:root {
  /* Colour: brand */
  --rq-ink: #0e1a2b;           /* burnt orange (clay); was #0b1422 until 8 Nov 2026 */
  --rq-rust: #172a44;
  --rq-peach: #ffd23f;
  --rq-coral: #3d7bf0;          /* shapes, icons, rules; text only >= 24px on ink (3.09:1); never on rust (2.55) */
  --rq-cream: #faf9f5;

  /* Colour: support */
  --rq-coral-deep: #1f4fbf;     /* text and buttons on light: 6.41 on cream */
  --rq-peach-soft: #fff3c2;
  --rq-ink-soft: #4b5768;       /* muted on light: 7.48 cream, 7.88 white. NEVER on ink or rust */
  --rq-cream-soft: #b9c6d8;     /* muted on dark: 6.11 ink, 5.04 rust */
  --rq-error: #a3281c;          /* light surfaces: 6.93 cream, 7.30 white, 5.92 peach-soft */
  --rq-ok: #1f6b45;             /* light surfaces: 6.14 cream, 5.24 peach-soft */
  --rq-error-on-dark: #ffb3a6;  /* dark surfaces: 6.24 ink, 5.15 rust */
  --rq-ok-on-dark: #8fdcae;     /* dark surfaces: 6.63 ink, 5.47 rust */
  --rq-scrim: rgba(14, 26, 43, .92);

  /* Type: families */
  --rq-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --rq-font-body: "Figtree", system-ui, sans-serif;
  --rq-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* Type: sizes (375px -> 1440px). Floor 14px Latin, 15px Arabic. */
  --rq-fs-display: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);      /* 40 -> 72 */
  --rq-fs-h1: clamp(2rem, 1.5rem + 2.1vw, 3.25rem);            /* 32 -> 52 */
  --rq-fs-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2.25rem);        /* 26 -> 36 */
  --rq-fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);         /* 20 -> 24 */
  --rq-fs-body-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* 18 -> 20 */
  --rq-fs-body: 1rem;                                          /* 16 */
  --rq-fs-small: 0.875rem;                                     /* 14 (Arabic 15, see :lang(ar)) */

  /* Type: weights. Only 400, 600 and 700 exist in all three families, so only those are used. */
  --rq-fw-display: 700; --rq-fw-h1: 700; --rq-fw-h2: 600; --rq-fw-h3: 600;
  --rq-fw-body: 400;    --rq-fw-label: 600;

  /* Type: line heights, Latin. Arabic values replace these inside :lang(ar). */
  --rq-lh-display: 1.05;
  --rq-lh-h1: 1.1;
  --rq-lh-h2: 1.2;
  --rq-lh-h3: 1.3;
  --rq-lh-body-lg: 1.5;
  --rq-lh-body: 1.55;
  --rq-lh-small: 1.5;

  /* Space, shape, touch */
  --rq-space-1: 4px;  --rq-space-2: 8px;  --rq-space-3: 12px; --rq-space-4: 16px;
  --rq-space-5: 24px; --rq-space-6: 32px; --rq-space-7: 48px; --rq-space-8: 72px;
  --rq-gutter: 16px;
  --rq-radius: 16px;
  --rq-radius-sm: 10px;
  --rq-tap: 44px;
  --rq-focus-ring: 3px;

  /* Motion */
  --rq-ease: cubic-bezier(.2, .7, .2, 1);
  --rq-dur: 220ms;
}

/* Light surface: the default, and an explicit reset for a light card nested inside a dark section. */
:root,
.rq-light,
[data-surface="light"] {
  --rq-bg: var(--rq-cream);
  --rq-text: var(--rq-ink);               /* 10.15 */
  --rq-text-muted: var(--rq-ink-soft);    /* 7.48 */
  --rq-placeholder: var(--rq-ink-soft);   /* 7.88 on white input */
  --rq-link: var(--rq-coral-deep);        /* 6.41 */
  --rq-panel: var(--rq-peach-soft);
  --rq-input-bg: #ffffff;
  --rq-btn-bg: var(--rq-coral-deep);
  --rq-btn-text: var(--rq-cream);         /* 6.41 */
  --rq-error-text: var(--rq-error);       /* 6.93 cream, 7.30 white */
  --rq-ok-text: var(--rq-ok);             /* 6.14 cream */
  --rq-focus: var(--rq-coral-deep);
  --rq-line: var(--rq-coral);             /* 3.28 on cream: non-text only */
}

/* Dark surface */
.rq-dark,
[data-surface="dark"] {
  --rq-bg: var(--rq-ink);
  --rq-text: var(--rq-cream);             /* 10.15 on ink, 8.38 on rust */
  --rq-text-muted: var(--rq-cream-soft);  /* 6.11 on ink, 5.04 on rust */
  --rq-placeholder: var(--rq-cream-soft); /* 5.04 on a rust input */
  --rq-link: var(--rq-peach);             /* 6.16 on ink, 5.09 on rust */
  --rq-panel: var(--rq-rust);
  --rq-input-bg: var(--rq-rust);
  --rq-btn-bg: var(--rq-peach);
  --rq-btn-text: var(--rq-ink);           /* 6.16 */
  --rq-error-text: var(--rq-error-on-dark); /* 6.24 ink, 5.15 rust */
  --rq-ok-text: var(--rq-ok-on-dark);     /* 6.63 ink, 5.47 rust */
  --rq-focus: var(--rq-peach);
  --rq-line: var(--rq-coral);             /* 3.09 on ink: non-text only */
}
.rq-dark, .rq-light, [data-surface] { background: var(--rq-bg); color: var(--rq-text); }

/* Arabic: face, line heights, 15px floor. Direction comes from dir="rtl" and logical properties. */
:lang(ar) {
  font-family: var(--rq-font-arabic);
  letter-spacing: 0;
  font-style: normal;
  text-transform: none;
  --rq-fs-small: 0.9375rem;
  --rq-lh-display: 1.3;
  --rq-lh-h1: 1.35;
  --rq-lh-h2: 1.4;
  --rq-lh-h3: 1.5;
  --rq-lh-body-lg: 1.75;
  --rq-lh-body: 1.8;
  --rq-lh-small: 1.7;
}

/* Type steps: size, face, weight and line height travel together. */
body { font: var(--rq-fw-body) var(--rq-fs-body)/var(--rq-lh-body) var(--rq-font-body); background: var(--rq-bg); color: var(--rq-text); }
.rq-display { font: var(--rq-fw-display) var(--rq-fs-display)/var(--rq-lh-display) var(--rq-font-display); }
.rq-h1 { font: var(--rq-fw-h1) var(--rq-fs-h1)/var(--rq-lh-h1) var(--rq-font-display); }
.rq-h2 { font: var(--rq-fw-h2) var(--rq-fs-h2)/var(--rq-lh-h2) var(--rq-font-display); }
.rq-h3 { font: var(--rq-fw-h3) var(--rq-fs-h3)/var(--rq-lh-h3) var(--rq-font-display); }
.rq-body-lg { font: var(--rq-fw-body) var(--rq-fs-body-lg)/var(--rq-lh-body-lg) var(--rq-font-body); }
.rq-small { font: var(--rq-fw-label) var(--rq-fs-small)/var(--rq-lh-small) var(--rq-font-body); }
:lang(ar) :is(.rq-display, .rq-h1, .rq-h2, .rq-h3, .rq-body-lg, .rq-small, body),
:is(.rq-display, .rq-h1, .rq-h2, .rq-h3, .rq-body-lg, .rq-small):lang(ar),
body:lang(ar) { font-family: var(--rq-font-arabic); }

/* Form controls do not inherit fonts by default; without this Arabic forms would not use Plex. */
:where(button, input, select, textarea) { font: inherit; color: inherit; }

/* Shared accessibility defaults */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--rq-focus-ring) solid var(--rq-focus);
  outline-offset: 2px;
}

/* Tap targets: 44 x 44 px for every control. Classes: .rq-btn (buttons and button-like links),
   .rq-icon-btn (icon-only, e.g. close), .rq-nav a (navigation), .rq-lang (EN/AR switch). Inline links inside
   a sentence are exempt (WCAG 2.5.8 inline exception). Checkboxes and radios are 24 px but sit inside
   label.rq-check, which is the 44 px target. */
:where(button, .rq-btn, .rq-icon-btn, .rq-nav a, .rq-lang, summary, select, textarea,
       input:not([type="checkbox"], [type="radio"])) {
  min-block-size: var(--rq-tap);
  min-inline-size: var(--rq-tap);
}
:where(.rq-btn, .rq-nav a, .rq-lang) { display: inline-flex; align-items: center; justify-content: center; }
:where(label.rq-check) { display: flex; align-items: center; gap: var(--rq-space-3); min-block-size: var(--rq-tap); }
:where(input[type="checkbox"], input[type="radio"]) { inline-size: 24px; block-size: 24px; accent-color: var(--rq-link); flex: none; }
::placeholder { color: var(--rq-placeholder); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  :root { --rq-dur: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}