/* AIS Insights design tokens.
 *
 * The only file in the frontend that holds colour values: components use these
 * variables and nothing else (tests/test_design_tokens.py enforces it). Values follow
 * the editorial design handoff of 17 Oct 2026, with the AIS Quick Reference Brand and
 * Style Guide of 19 Oct 2026 where the two differ — each such choice is recorded in
 * docs/redesign/DECISIONS.md under the number given here.
 */

:root {
  /* --- surfaces ------------------------------------------------------------ */
  --c-cream: #F7F3EA;          /* page background */
  --c-paper: #FFFDF8;          /* cards, input fields */
  --c-sand: #EFE8D8;           /* role band, chips, topic labels */
  --c-line: #E3DCCB;           /* rules, card borders */
  --c-line-strong: #CFC5AD;    /* chip and tag borders */
  --c-field-line: #8C8470;     /* field borders: 3.36 cream, 3.66 paper, 3.05 sand (WCAG 1.4.11; design #D8CFB9 was 1.4) */

  /* --- brand: navy and gold (decisions 1, 2) -------------------------------- */
  --c-navy: #0B4670;           /* AIS primary; headings, primary buttons, navy section */
  --c-navy-hover: #0A3351;     /* same lightness step the handoff used for its navy */
  --c-gold: #D0A055;           /* JAIS gold: rule, pixel, markers, accent buttons. Never text on light */
  --c-gold-dark: #8B5F03;      /* gold for text on light: 5.08 cream, 5.53 paper, 4.61 sand */
  --c-gold-light: #DDAD62;     /* gold for text on navy: 4.81 */
  --c-green: #207746;          /* CAIS green, only for "human-approved" (decision 5): 5.01 on cream */

  /* --- text ---------------------------------------------------------------- */
  --c-ink: #1D2B3A;            /* body text: 13.0 on cream */
  --c-muted: #545B64;          /* metadata: 6.20 on cream */
  --c-placeholder: #646A73;    /* 4.92 on cream, 5.36 on paper */
  --c-error: #B3261E;          /* 5.90 on cream */
  --c-white: #FFFFFF;
  --c-on-navy: #D9E3EC;        /* body text on navy: 7.60 */
  --c-on-navy-line: rgba(255, 255, 255, 0.22);
  --c-focus: var(--c-navy);
  --c-focus-on-navy: var(--c-white);

  /* --- portrait duotone (reference: portraits arrive already toned with these) */
  --duo-dark: #0E273F;
  --duo-mid: #5F788D;
  --duo-light: #F7F3EA;

  /* --- type: Merriweather for display, Poppins for everything else (decisions 3, 4) */
  --f-serif: 'Merriweather', 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif;
  --f-sans: 'Poppins', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fw-display: 300;           /* Merriweather Light: hero, H2, section heads */
  --fw-question: 700;          /* key questions keep their weight so they lead the card */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Merriweather sizes as designed. Poppins sizes are the design's ×0.92 (decision 3a):
     it is ~8% wider than the face the design was drawn with. */
  --fs-hero: clamp(36px, 5vw, 58px);
  --fs-h1: clamp(32px, 4vw, 46px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h3: 24px;
  --fs-question-lg: clamp(24px, 2.4vw, 32px);
  --fs-question: 23px;
  --fs-question-row: 25px;     /* Browse list rows */
  --fs-title: 15px;            /* paper title, Merriweather italic */
  --fs-title-lg: 17px;
  --fs-lead: 19px;
  --fs-body: 17px;
  --fs-body-sm: 16px;
  --fs-meta-lg: 15px;
  --fs-nav: 16px;
  --fs-button: 15px;
  --fs-meta: 14px;
  --fs-small: 13px;
  --fs-label: 12px;
  --fs-label-lg: 14px;
  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.55;
  --ls-label: 0.16em;

  /* --- spacing --------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;

  /* --- layout ---------------------------------------------------------------- */
  --container: 1240px;
  --container-text: 760px;
  --gutter: 32px;
  --section-y: var(--s-9);
  --card-pad: 30px;
  --grid-gap: 24px;
  --radius: 0;                 /* deliberately square */
  --tap: 44px;                 /* minimum height of every control */
  /* the selects' chevron (decision 62), drawn in --c-ink #1D2B3A: a data URI cannot read a
     custom property, so the colour is written out here, the one file that holds colours */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D2B3A' stroke-width='1.75'/%3E%3C/svg%3E");
  --rule: 1px;
  --rule-accent: 3px;          /* active nav item, portrait ring */
  --rule-heavy: 6px;           /* top edge of the large card */
  --player-h: 72px;            /* the audio bar along the bottom of the window */
  --marker: 10px;              /* gold square bullet */
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* Below 700 px the side margin is 16 px and sections tighten (handoff, Responsive). */
@media (max-width: 699px) {
  :root {
    --gutter: 16px;
    --section-y: var(--s-8);
    --card-pad: 22px;
    --fs-question: 21px;
  }
}