/*
 * EventKrowd theme — Web Awesome (--wa-*) overrides.
 *
 * Values sourced from docs/design-tokens.json, extracted from the
 * Figma EventKrowd Design Kit. This file is the only place brand
 * color values are defined for the application.
 */

:root {
  /*
   * Brand ramp. Web Awesome derives every semantic brand token from numbered
   * stops (--wa-color-brand-fill-loud resolves to --wa-color-brand-50), so
   * setting --wa-color-brand alone leaves components rendering WA's default
   * blue. Stops are lightness-ascending: 05 darkest, 95 lightest.
   *
   * Generated by script/brand_ramp.py: Nautical East is pinned as stop 50 and
   * the rest interpolate in OKLCH at constant hue, with chroma tapered toward
   * the extremes. All stops verified against WCAG 2.1 AA — brand-50 with a
   * white label is 7.18:1.
   */
  --wa-color-brand-95: #f0f6fa;
  --wa-color-brand-90: #d9e4eb;
  --wa-color-brand-80: #acc1cd;
  --wa-color-brand-70: #809eb0;
  --wa-color-brand-60: #557d93;
  --wa-color-brand-50: #295d77; /* Nautical East */
  --wa-color-brand-40: #1e4a60;
  --wa-color-brand-30: #13384a;
  --wa-color-brand-20: #092735;
  --wa-color-brand-10: #021722;
  --wa-color-brand-05: #010f18;

  /* Brand */
  --wa-color-brand: #295d77;
  --wa-color-brand-on-loud: #ffffff;

  /* Text */
  --wa-color-text-normal: #1b1d26;
  --wa-color-text-quiet: #545868;
  --wa-color-text-link: #295d77;

  /* Surface */
  --wa-color-surface-default: #ffffff;
  --wa-color-surface-lowered: #f1f2f3;
  --wa-color-surface-border: #e4e5e9;

  /* Neutral */
  --wa-color-neutral-on-normal: #424554;
  --wa-color-neutral-fill-quiet: #f1f2f3;
  --wa-color-neutral-fill-normal: #e4e5e9;
  --wa-color-neutral-border-normal: #c7c9d0;

  /* Status */
  --wa-color-danger-fill-loud: #dc3146;
  --wa-color-yellow: #fac22b;

  /* Form controls */
  --wa-form-control-value-color: #1b1d26;
  --wa-form-control-placeholder-color: #717584;
  --wa-form-control-background-color: #ffffff;
  /* SUPERSEDES FIGMA, deliberately, and tools/test_theme.py records it. Figma exports
     #e4e5e9, which measures 1.26:1 against white. WCAG 2.1 AA 1.4.11 Non-text Contrast
     requires 3:1 for the boundary of a control, and the PRD requires AA. Form fields
     here sit white-on-white, so this 1px hairline is the ONLY thing marking where the
     control is — it is load-bearing, not decoration, and the user-agent exception does
     not apply because Chrome's own default input border is about 3.5:1.
     #8b919c measures 3.17:1. Two nearer shades were rejected on arithmetic: #c7c9d0
     (the neutral-border-normal token) is 1.65:1 and #949aa5 is 2.83:1. */
  --wa-form-control-border-color: #8b919c;

  /* Housing embed layout tokens (external iframe) */
  --ek-housing-embed-background: #fff;
  --ek-housing-embed-text: #172033;
  --ek-housing-embed-border: #d8deea;

  /* Typography */
  --wa-font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wa-font-family-heading: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wa-font-weight-heading: 600;
}

/*
 * Chart series palette (Web Awesome Pro charts).
 *
 * Charts do NOT inherit --wa-color-brand: they read --border-color-1..6 and
 * --fill-color-1..6, which default to WA's stock blue/pink/green/yellow/purple/
 * orange. Series colors are also a different problem from UI color — they must
 * stay distinguishable under color-vision deficiency, so these are computed and
 * validated, not picked by eye.
 *
 * Series 1 is the brand hue lifted in chroma (#295d77 has chroma 0.07 and reads
 * as gray when used as a data mark). Hue order is chosen so CVD-confusable pairs
 * are never adjacent. Both palettes pass all six checks of the dataviz validator
 * (lightness band, chroma floor, CVD separation, normal-vision floor, contrast).
 *
 * Assign in fixed order — never cycle. A 7th series folds into "Other" or
 * becomes small multiples.
 */
:root,
wa-chart, wa-line-chart, wa-bar-chart, wa-doughnut-chart, wa-pie-chart,
wa-scatter-chart, wa-radar-chart, wa-polar-area-chart, wa-bubble-chart,
wa-sparkline {
  /* App-owned, not Web Awesome overrides: WA has no scrim token, and the photo
     overlay needs a fixed dark wash with a light label whatever the theme does.
     Declared here because this file is the only place colour values may live. */
  --ek-color-sign-in-tint: color-mix(in srgb, var(--wa-color-brand-50) 50%, transparent);
  --ek-color-scrim: rgba(0, 0, 0, 0.6);
  --ek-color-on-scrim: #fff;

  --border-color-1: #007cb0; /* brand hue, chroma-lifted */
  --border-color-2: #da7e00;
  --border-color-3: #b678f5;
  --border-color-4: #00ac49;
  --border-color-5: #e66ba3;
  --border-color-6: #808aff;

  --fill-color-1: color-mix(in srgb, #007cb0 40%, transparent);
  --fill-color-2: color-mix(in srgb, #da7e00 40%, transparent);
  --fill-color-3: color-mix(in srgb, #b678f5 40%, transparent);
  --fill-color-4: color-mix(in srgb, #00ac49 40%, transparent);
  --fill-color-5: color-mix(in srgb, #e66ba3 40%, transparent);
  --fill-color-6: color-mix(in srgb, #808aff 40%, transparent);
}

/*
 * Dark mode is selected, not flipped: the light steps sit outside the dark
 * lightness band (L 0.48–0.67), so each hue is restepped for a dark surface.
 */
@media (prefers-color-scheme: dark) {
  :root,
  wa-chart, wa-line-chart, wa-bar-chart, wa-doughnut-chart, wa-pie-chart,
  wa-scatter-chart, wa-radar-chart, wa-polar-area-chart, wa-bubble-chart,
  wa-sparkline {
    --border-color-1: #2990c5;
    --border-color-2: #c66c00;
    --border-color-3: #a162dd;
    --border-color-4: #00a240;
    --border-color-5: #cd558d;
    --border-color-6: #6f77ea;

    --fill-color-1: color-mix(in srgb, #2990c5 40%, transparent);
    --fill-color-2: color-mix(in srgb, #c66c00 40%, transparent);
    --fill-color-3: color-mix(in srgb, #a162dd 40%, transparent);
    --fill-color-4: color-mix(in srgb, #00a240 40%, transparent);
    --fill-color-5: color-mix(in srgb, #cd558d 40%, transparent);
    --fill-color-6: color-mix(in srgb, #6f77ea 40%, transparent);
  }
}

body {
  font-family: var(--wa-font-family-body);
}

.visually-hidden {
  position: absolute;
  /* Pin the clipped 1px box to the containing-block origin. Without offsets the
     box sits at its static position — inside a horizontally-scrolled table that
     can be past the viewport edge — and the absolutely-positioned box is not
     clipped by the scroll wrap (its containing block skips it), so it extends
     documentElement.scrollWidth and the page gains a phantom horizontal
     scrollbar (seen on /admin/ota_partners at 1024). */
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}