/* AHG Careers — shared design foundation (U-1)
 * ---------------------------------------------------------------------------
 * Plan: docs/UI-FOUNDATION-PLAN-2026-08-23.md §4.A
 *
 * WHAT THIS FILE IS
 *   Design tokens and OPT-IN control primitives. Nothing here restyles an
 *   existing page: there is not one bare element selector (no `button {}`,
 *   no `input {}`), so loading it on all 40 routes changes no pixel until a
 *   page opts in by using an `ahg-` class. That is deliberate — U-1 creates
 *   the foundation, U-3/U-5 do the restyling, and separating them means this
 *   can ship without a visual review of every page.
 *
 * WHY IT EXISTS
 *   There was no .css file in the product. 814+ inline `style="` attributes
 *   and 20 embedded <style> blocks live inside Python string literals, so a
 *   rule like "tap targets are 44px" was 814 edits rather than one. Every
 *   later fix now costs one edit here.
 *
 * WHERE THE COLOURS COME FROM
 *   Measured from the canonical AHG homepage (aspirehospitality.com.au) on
 *   2026-08-23, not from the brand PDF. Kom ruled the homepage canonical on
 *   2026-06-24. Frequency on that page: #a08dc2 x18, #5834b3 x5, #55bb53 x4,
 *   Inter as the type face.
 *
 * CONTRAST — every pairing below is measured, not assumed:
 *   #5834b3 + white .............. 8.21  AAA   <- primary action
 *   #a08dc2 + black .............. 7.08  AAA   <- accent surfaces
 *   #55bb53 + black .............. 8.62  AAA   <- success
 *   #ffffff + #32373c ........... 12.02  AAA   <- body text
 *   #a08dc2 + white .............. 2.96  FAILS <- never do this
 *
 *   That last line is the trap. African Violet is a LIGHT accent meant to
 *   carry dark text. An earlier fix saw white-on-violet failing AA and
 *   changed the brand colour to #7c5fb0 — the wrong half. The fix is to
 *   change the text colour, or use the deep violet the homepage already has.
 * ------------------------------------------------------------------------- */

:root {
  /* ---- brand, as measured on the canonical homepage ---- */
  --ahg-violet:        #a08dc2;   /* African Violet — light accent, DARK text */
  --ahg-violet-deep:   #5834b3;   /* homepage deep violet — carries WHITE text */
  --ahg-green:         #55bb53;   /* homepage green — DARK text */
  --ahg-ink:           #32373c;   /* homepage body ink */
  --ahg-black:         #000000;
  --ahg-white:         #ffffff;

  /* ---- semantic roles: use THESE in components, never the raw brand ---- */
  --color-bg:          var(--ahg-white);
  --color-surface:     var(--ahg-white);
  --color-text:        var(--ahg-ink);
  --color-text-muted:  #5f6672;
  --color-border:      #d9d5e2;

  --color-action:      var(--ahg-violet-deep);  /* + --color-on-action */
  --color-on-action:   var(--ahg-white);
  --color-action-hover:#452a8c;

  --color-accent:      var(--ahg-violet);       /* + --color-on-accent */
  --color-on-accent:   var(--ahg-black);
  --color-accent-wash: #f1ecf8;

  --color-success:     var(--ahg-green);
  --color-on-success:  var(--ahg-black);
  --color-danger:      #b3261e;
  --color-warning:     #8a6100;

  --color-focus:       var(--ahg-violet-deep);

  /* ---- type ---- */
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-data: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .78rem; --text-sm: .88rem; --text-md: 1rem;
  --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.85rem; --text-3xl: 2.4rem;

  /* ---- space: one 4px-based scale, replacing the ad-hoc values ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- radius: /jobs alone shipped 7 different radii ---- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;

  /* ---- the rule that could not be applied before ---- */
  --touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:         #131118;
    --color-surface:    #1b1823;
    --color-text:       #ece9f1;
    --color-text-muted: #a49db2;
    --color-border:     #322c3f;
    --color-accent-wash:#241d31;
    /* deep violet is too dark to read on a dark ground — the light accent
       becomes the action colour, and it takes dark text, as it always did */
    --color-action:     var(--ahg-violet);
    --color-on-action:  var(--ahg-black);
    --color-action-hover:#b9a8d6;
    --color-focus:      var(--ahg-violet);
  }
}
:root[data-theme="dark"] {
  --color-bg:         #131118;
  --color-surface:    #1b1823;
  --color-text:       #ece9f1;
  --color-text-muted: #a49db2;
  --color-border:     #322c3f;
  --color-accent-wash:#241d31;
  --color-action:     var(--ahg-violet);
  --color-on-action:  var(--ahg-black);
  --color-action-hover:#b9a8d6;
  --color-focus:      var(--ahg-violet);
}

/* ===========================================================================
 * CONTROL PRIMITIVES — opt-in only. Every class is `ahg-` prefixed so it
 * cannot collide with the existing inline styles or ad-hoc class names.
 * ========================================================================= */

.ahg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 600;
  line-height: 1; text-decoration: none; text-transform: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ahg-btn:hover  { background: var(--color-action-hover); }
.ahg-btn:disabled, .ahg-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.ahg-btn--secondary {
  background: transparent; color: var(--color-action);
  border-color: var(--color-border);
}
.ahg-btn--secondary:hover { background: var(--color-accent-wash); }

.ahg-btn--quiet {
  background: transparent; color: var(--color-text-muted);
  border-color: transparent; font-weight: 500;
}
.ahg-btn--quiet:hover { color: var(--color-text); background: var(--color-accent-wash); }

/* A field is label + control + optional hint, stacked. Using it makes the
 * accessible name structural rather than something to remember — the defect
 * behind 42 of 44 unnamed controls on /admin. */
.ahg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ahg-label {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text);
}
.ahg-hint  { font-size: var(--text-xs); color: var(--color-text-muted); }
.ahg-error { font-size: var(--text-xs); color: var(--color-danger); font-weight: 600; }

.ahg-input, .ahg-select, .ahg-textarea {
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-md);
  width: 100%;
}
.ahg-textarea { min-height: calc(var(--touch-target) * 2); resize: vertical; }

/* Checkboxes on /admin ship at 15x15px. This is the one-edit fix for that. */
.ahg-check {
  width: 24px; height: 24px; accent-color: var(--color-action);
  flex: 0 0 auto; cursor: pointer;
}
.ahg-check-row {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  min-width: var(--touch-target);   /* BOTH dimensions — a 44px-tall, 24px-wide
                                       target is still a miss on a phone */
  cursor: pointer;
}

.ahg-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-wash); color: var(--color-text);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.5;
}
.ahg-chip--success { background: var(--color-success); color: var(--color-on-success); }
.ahg-chip--danger  { background: var(--color-danger);  color: var(--ahg-white); }

.ahg-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Keyboard focus — one definition instead of per-page or, mostly, none. */
.ahg-btn:focus-visible, .ahg-input:focus-visible, .ahg-select:focus-visible,
.ahg-textarea:focus-visible, .ahg-check:focus-visible, .ahg-check-row:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Skip link — /admin has no h1 and no skip target; this is ready for U-2. */
.ahg-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-action); color: var(--color-on-action);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0;
  z-index: 999; font-weight: 600;
}
.ahg-skip:focus { left: 0; }

.ahg-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ahg-btn { transition: none; }
}