/**
 * BRAND TOKENS — the file you edit to rebrand for a new customer.
 *
 * PER-AGENCY BRAND (D-083) — platform-wide today.
 * Every colour, font and shape decision in the product resolves
 * through these variables; no component hard-codes a hex value. Change this file
 * and one strings file (brand/strings.js) and the whole product is rebranded.
 *
 * ── The palette: gold, white, blue ─────────────────────────────────────────
 * Navy carries structure and all body text. Gold is the accent — it marks what
 * you can act on and what you have chosen, and nothing else. White and a barely
 * tinted white carry everything between.
 *
 * The discipline that keeps it elegant rather than gaudy: gold appears on a
 * screen two or three times, never ten.
 */

:root {
  /* ── Ink (blue) — structure and text ─────────────────────────────────── */
  --ink:            #0B2545;   /* headings, primary text            15.3:1 on white */
  --ink-soft:       #13315C;   /* secondary text                    11.5:1 */
  --ink-muted:      #5A7296;   /* captions, placeholders             4.6:1 — AA at 14px+ */
  --ink-faint:      #8FA3BF;   /* disabled, hairline text — never for anything readable */

  /* ── Gold — accent only ──────────────────────────────────────────────── */
  --gold:           #C9A227;   /* fills, borders, the chosen state */
  --gold-deep:      #8A6D1F;   /* gold as TEXT on white             5.2:1 — the only gold safe to read */
  --gold-soft:      #EFE3BC;   /* selected-row wash, badge fills */
  --gold-wash:      #FBF7EC;   /* the faintest gold ground */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --paper:          #FFFFFF;   /* cards, panels */
  --paper-tint:     #F6F8FC;   /* page ground */
  --line:           #E1E8F2;   /* hairlines */
  --line-strong:    #C7D3E4;   /* input borders, dividers that must be seen */

  /* ── Semantic ────────────────────────────────────────────────────────── */
  --ok:             #1B7F5A;
  --warn:           #9A5B1E;
  --warn-wash:      #FDF6EC;

  /* The only red in the product, and it earns that by being nearly absent: the
     agency dashboard's "this flight leaves within two days" mark. Reserved for
     time running out — never for validation, which the customer app handles in
     words rather than in colour. */
  --urgent:         #C0392B;

  /* ── Channel marks ──────────────────────────────────────── */
  /* The WhatsApp and email icons on the agency's contact buttons. Not part of
     the palette above and NOT re-declared in the dark block below: WhatsApp's
     green is a third party's mark, and the envelope's gradient was supplied as
     artwork. Both read on white and on black, which is the only thing theming
     them would have bought. A clone that wants its own contact icons changes
     these; nothing else in the product uses them. */
  --channel-whatsapp:     #25D366;
  --channel-whatsapp-ink: #FFFFFF;
  --channel-mail-1:       #ED2224;   /* the gradient, top-right → bottom-left */
  --channel-mail-2:       #F58220;
  --channel-mail-3:       #FDC500;

  /* ── Type ────────────────────────────────────────────────────────────── */
  /* One serif for display, one sans for everything else. That single contrast
     is what reads as considered rather than default. */
  --font-display:   'Lora', Georgia, 'Times New Roman', serif;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --text-xs:        0.75rem;   /* 12 — badges, captions */
  --text-sm:        0.875rem;  /* 14 — secondary */
  --text-base:      1rem;      /* 16 — body. Never smaller for anything a customer must read */
  --text-lg:        1.125rem;  /* 18 */
  --text-xl:        1.375rem;  /* 22 — times on a flight card */
  --text-2xl:       1.75rem;   /* 28 */
  --text-3xl:       2.5rem;

  --leading-tight:  1.2;
  --leading-normal: 1.55;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-pill:    999px;

  /* Shadows are soft and blue-tinted rather than grey — a neutral shadow on a
     warm-white page reads as dirt. */
  --shadow-sm:      0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow:         0 2px 8px rgba(11, 37, 69, 0.08);
  --shadow-lg:      0 12px 32px rgba(11, 37, 69, 0.12);

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-8: 3rem;     --sp-10: 4rem;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --content-max:    1180px;
  --header-h:       68px;

  /**
   * The assistant rail's width — and the whole mechanism for removing it.
   *
   * The shell is a grid whose second column is exactly this value. With the
   * agent switched off the value becomes 0 and the main column reflows to full
   * width; no product code contains an `if` about the agent, and nothing needs
   * changing later to take it out.
   */
  --rail-w:         0px;
}

/* Set by the client when the server reports the agent is available. */
:root[data-agent='on'] {
  --rail-w: 360px;
}

/* Touch targets: 44px is the floor, and this product is used by people who are
   not confident with computers, so controls are deliberately larger than the
   minimum rather than exactly at it. */
:root {
  --tap-min: 48px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * DARK — black, gold, white.
 *
 * Per-agency brand (D-083), like everything above it.
 *
 * Opt-in ONLY. These values apply when something sets data-theme="dark" on
 * <html>. There is deliberately NO `@media (prefers-color-scheme: dark)` rule
 * here: a stylesheet that flips itself would restyle the app for every visitor
 * whose laptop happens to be in dark mode, and that is a product decision, not
 * a CSS one. Each page decides and sets the attribute itself.
 *
 * ── One palette, both applications ─────────────────────────────────────────
 * The customer app and the agency dashboard use exactly these values. An
 * earlier version gave the customer app a softer navy ground and the dashboard
 * a deeper black; the navy read as murky rather than considered, and two
 * palettes is one more thing to drift. Black is now the ground everywhere.
 *
 * ── The mapping ────────────────────────────────────────────────────────────
 * A straight inversion of the two semantic families: `ink` is always the
 * foreground, `paper` always the surface. Every rule written against them works
 * in both themes without a single conditional.
 *
 * Gold has to CHANGE rather than carry over. #C9A227 is tuned to be read on
 * white; on black it reads as dull brown, so it lifts. `--gold-deep` inverts
 * its job entirely — on white it darkens to stay legible, here it lightens.
 * Same for `--gold-hover`: darker on white, lighter on black.
 *
 * Contrast measured against the ground, not assumed.
 * ───────────────────────────────────────────────────────────────────────── */

/* The one action colour, so no button hard-codes it. */
:root {
  --action-bg:    var(--ink);
  --action-fg:    var(--paper);
  --gold-hover:   #D8B23C;      /* gold, one step DARKER — correct on white */
  --gold-rgb:     201, 162, 39; /* the pulse animation needs channels, not a hex */
  --warn-line:    #E8C9A0;
}

:root[data-theme='dark'] {
  /* Ink — now the FOREGROUND family */
  --ink:            #F2F3F6;   /* primary text            17.8:1 on the ground */
  --ink-soft:       #C7CAD2;   /* secondary text          12.1:1 */
  --ink-muted:      #8E919C;   /* captions                 6.3:1 — AA at 14px+ */
  --ink-faint:      #5A5D68;   /* hairline text — never for anything readable */

  /* Gold — lifted for a black ground */
  --gold:           #E8C25A;   /* fills, borders, the chosen state   11.6:1 */
  --gold-deep:      #F0CE72;   /* gold as TEXT            13.0:1 — lighter, not darker */
  --gold-soft:      #3A2F14;   /* selected-row wash, badge fills */
  --gold-wash:      #17150E;   /* the faintest gold ground */
  --gold-hover:     #F2CF6E;   /* gold, one step LIGHTER — the inverse of white */
  --gold-rgb:       232, 194, 90;

  /* Surfaces — now the DARK family */
  --paper:          #20202A;   /* cards, panels — a 1.23 step above the ground,
                                  enough to read as raised. Blacks compress, so
                                  this is as much separation as is available
                                  before muted text drops below AA on it. */
  --paper-tint:     #0A0A0C;   /* page ground */
  --line:           #26262E;   /* hairlines */
  --line-strong:    #3A3A45;   /* input borders, dividers that must be seen */

  /* Semantic — the light-theme values are too dark to read here */
  --ok:             #4ADE9B;   /* 11.5:1 */
  --warn:           #E0A458;   /*  9.1:1 */
  --urgent:         #FF6B5E;   /*  7.4:1 — #C0392B on black is a smear, not a mark */
  --warn-wash:      #241B0E;
  --warn-line:      #4A3A22;

  /* Depth on a black ground comes from the surface step and the hairline, not
     from shadow. Kept soft rather than removed so panels do not sit flat. */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow:         0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.7);

  /* Gold is the action here. On white it would shout; on black it is the only
     thing warm enough to read as a button. Black text on it: 11.6:1. */
  --action-bg:      var(--gold);
  --action-fg:      #0A0A0C;
}