/* ============================================================
   Avian Careers — design tokens (the single source of truth)
   Loaded FIRST by both the front site (front/layout/header.php)
   and the admin panel (admin/layout/header.php), so every layer
   after it — ui-refresh.css, theme.css, admin-refresh.css — reads
   the same values. Declare a token here, once per theme:
     :root                    → light values
     html[data-theme="dark"]  → the same names, re-pointed
   Anything built from these tokens gets dark mode for free.
   Never paint a component with a raw hex: add a token here first.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --display: "Poppins", system-ui, sans-serif;
  --text:    "Open Sans", system-ui, sans-serif;
  /* fixed-width text where columns matter (typing passage, serials, code) */
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* scale — few sizes, big jumps */
  --t-caption: 0.75rem;   /* 12 — meta only, never body copy */
  --t-eyebrow: 0.8125rem; /* 13 */
  --t-small:   0.875rem;  /* 14 — dense UI (tables, admin), the body-text floor */
  --t-body:    1rem;      /* 16 */
  --t-lead:    1.1875rem; /* 19 */
  --t-h5:      1.375rem;  /* 22 */
  --t-h3:      2rem;      /* 32 */
  --t-h2:      2.75rem;   /* 44 */
  --t-display: 3.25rem;   /* 52 */

  /* ---- Spacing — 4px grid ---- */
  --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: 96px;

  /* ---- Radius — pill for chips, 8px buttons/cards, 4px fields ---- */
  --radius: 8px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  /* A field's radius must never equal a button's: "press me" vs "type here". */
  --r-field: 4px;            /* inputs, selects, textareas */
  --r-btn:   8px;            /* buttons — deliberately != --r-field */

  /* ---- Control sizes ---- */
  --btn-h:    48px;          /* default button (LI rhythm) */
  --btn-h-sm: 40px;          /* small button */
  --tap:      44px;          /* touch-target floor */

  /* ---- Motion — three durations, three curves, nothing else ---- */
  --dur-1: 120ms;   /* micro: colour, opacity, icon state */
  --dur-2: 200ms;   /* standard: hover lift, expand, tab switch */
  --dur-3: 320ms;   /* entrance: modal, drawer, toast, page-level reveal */
  --ease:        cubic-bezier(.2,.7,.3,1);   /* default, decelerating */
  --ease-out:    cubic-bezier(0,0,.2,1);     /* things arriving */
  --ease-in-out: cubic-bezier(.34,0,.21,1);  /* symmetric move (open/close) */
  /* Press feedback — measured from facebook.com: transform 200ms on
     cubic-bezier(.17,.17,0,1). The liveliness is the asymmetry (instant
     squeeze, eased release), plus a small overshoot on the way back. */
  --ease-press:  cubic-bezier(.17,.17,0,1);     /* release: fast, strongly eased */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);  /* settle with a light overshoot */
  --press:      .96;   /* buttons, chips, nav items */
  --press-card: .988;  /* large surfaces move less, or it reads as wobble */

  /* ---- Brand: two colours, one job each ---- */
  --accent:        #0369A1;   /* sky-700 — navigable: links, nav, active, secondary */
  --accent-600:    #075985;   /* sky-800 hover */
  --accent-700:    #0c4a6e;   /* sky-900 */
  --accent-tint:   #e0f2fe;   /* sky-100 — hover tint */
  --accent-tint-2: #bae6fd;   /* sky-200 */
  /* CTA green: #16a34a gave 3.3:1 with white text — darkened to AA (5.02:1) */
  --cta:     #15803d;         /* converting: the ONE filled button per screen */
  --cta-600: #166534;
  --on-accent: #ffffff;       /* label on a filled --accent / --cta / --success:
                                 5.93 / 5.02 / 5.02:1 */
  --on-danger: #ffffff;       /* label on a filled --danger, 6.47:1 */
  --on-dark:   #ffffff;       /* text on --surface-3 / dark media banners
                                 (contest banner themes): 14.8:1 on #0c2a3e */
  /* Third-party brand marks (CLAUDE.md §4 exception) — the mark only, never a fill */
  --brand-linkedin: #0a66c2;  /* LinkedIn 2019+ blue, 5.69:1 on white */

  /* ---- Text: pick by emphasis, never by "which grey looks nice" ---- */
  --ink:    #0c4a6e;          /* headings      9.46:1 on white */
  --body:   #334155;          /* copy         10.35:1 */
  --muted:  #51657a;          /* secondary     6.01:1 */

  /* ---- Surfaces ---- */
  --surface:   #ffffff;
  --surface-2: #f0f9ff;       /* sky-50 tint band */
  --surface-3: #0c2a3e;       /* deep navy footer */
  /* text on the always-navy --surface-3 band (footer), same in both themes */
  --on-surface-3:       #cbd5e1;  /* 9.99:1 on #0c2a3e, 12.32:1 on dark #0a1526 */
  --on-surface-3-muted: #94a3b8;  /* 5.78:1 on #0c2a3e,  7.13:1 on dark #0a1526 */
  --panel:        #ffffff;    /* card / panel surface */
  --panel-2:      #f7f8fa;    /* inset surface (code samples, table heads) */
  --hairline:  #d7e6f1;       /* dividers only (1.27:1) — not a control boundary */
  --hairline-2:#e6eff6;
  --panel-border: var(--hairline);
  /* A field's boundary identifies the control, so it must clear WCAG 1.4.11 */
  --field-border: #748ba3;    /* 3.52:1 on white, 3.30:1 on --surface-2 */
  --chip-bg:      #eef2f7;
  --chip-text:    #334155;
  --row-hover:    #f4f8fd;
  --row-stripe:   #f8fafc;
  --you-row:      #fff8e1;    /* "your row" highlight in standings */
  --code-bg:      #f6f8fa;
  --code-border:  #e1e4e8;
  --code-text:    #be185d;    /* inline <code>: 6.04:1 on white, 5.67:1 on --code-bg */
  --overlay:      rgba(12,42,62,.55);  /* modal / drawer backdrop */
  --logo-chip:    #ffffff;    /* the logo PNG is drawn for a white ground, so it sits
                                 on this chip in both themes (not a UI surface) */

  /* ---- Elevation + focus ---- */
  --shadow-1: 0 1px 2px rgba(12,74,110,.06);
  --shadow-2: 0 2px 8px rgba(12,74,110,.08);
  --shadow-3: 0 4px 14px rgba(3,105,161,.12);
  --ring: 0 0 0 2px #fff, 0 0 0 4px rgba(3,105,161,.5);

  /* ---- Semantic (reserved meanings) ---- */
  /* success = done / hired */
  --success:        #15803d;   /* white label 5.02:1 */
  --success-bg:     #f0fdf4;
  --success-border: #16a34a;   /* 3.15:1 on --success-bg */
  --success-text:   #166534;   /* 6.81:1 on --success-bg */
  /* warning = pending / needs attention */
  --amber-bg:     #fff7ed;
  --amber-border: #fed7aa;
  --amber-text:   #9a3412;     /* 6.88:1 on --amber-bg */
  --warning-bg:     var(--amber-bg);
  --warning-border: #ea580c;   /* 3.35:1 on --amber-bg */
  --warning-text:   var(--amber-text);
  /* info = neutral notice */
  --info-bg:     #f0f9ff;
  --info-border: #0284c7;      /* 3.84:1 on --info-bg */
  --info-text:   #075985;      /* 7.09:1 on --info-bg */
  /* danger = destructive ONLY — a red button must delete something */
  --danger:        #b91c1c;    /* solid button, white label 6.47:1 */
  --danger-600:    #991b1b;    /* hover, 8.31:1 */
  --danger-bg:     #fef2f2;
  --danger-border: #ef4444;    /* 3.44:1 on --danger-bg */
  --danger-text:   #b91c1c;    /* 5.91:1 on --danger-bg */

  /* loading shimmer: a grey bar with a light sweep (dark re-points below) */
  --skeleton-bg: #e8eef5;
  --shimmer-hi:  rgba(255,255,255,.75);

  color-scheme: light;
}

/* ============================================================
   DARK — dark mode is not "invert": the same names, re-pointed.
   ============================================================ */
html[data-theme="dark"] {
  --accent:        #4da3f7;
  --accent-600:    #77b8f9;   /* hover = lighter in dark */
  --accent-700:    #a8d0fb;
  --accent-tint:   rgba(77,163,247,.14);
  --accent-tint-2: rgba(77,163,247,.28);
  --cta:     #22c55e;
  --cta-600: #4ade80;
  /* white on these bright fills is 2.3–2.7:1, so labels go dark in dark mode */
  --on-accent: #04121f;       /* 8.29:1 on --cta, 7.11:1 on --accent */
  --on-danger: #ffffff;       /* 4.83:1 on --danger */
  --on-dark:   #ffffff;       /* 18.3:1 on --surface-3 #0a1526 */
  --brand-linkedin: #70b5f9;  /* LinkedIn's dark-mode blue, 7.9:1 on --panel */
  --ink:      #e8eef7;        /* 16.05:1 on --surface */
  --body:     #c3cee0;        /* 11.79:1 */
  --muted:    #8fa1ba;        /*  7.11:1 */
  --surface:   #0b1220;
  --surface-2: #0f1729;
  --surface-3: #0a1526;       /* footer */
  --on-surface-3:       #cbd5e1;
  --on-surface-3-muted: #94a3b8;
  --panel:        #111b2e;
  --panel-2:      #0d1526;
  --hairline:  #253349;
  --hairline-2:#1e2a3f;
  --panel-border: #253349;
  /* field boundary must clear 3:1 in dark too (--panel-border is 1.47:1) */
  --field-border: #5f7697;    /* 3.71:1 on --panel, 4.03:1 on --surface */
  --chip-bg:      #1d2a40;
  --chip-text:    #c3cee0;
  --row-hover:    #16233a;
  --row-stripe:   #0e1930;
  --you-row:      rgba(245,158,11,.14);
  --code-bg:      #0d1526;
  --code-border:  #253349;
  --code-text:    #f9a8d4;    /* 9.49:1 on --panel, 10.05:1 on --code-bg */
  --overlay:      rgba(0,0,0,.7);
  --logo-chip:    #ffffff;    /* deliberately unchanged: the brand mark needs its white ground */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 10px rgba(0,0,0,.5);
  --shadow-3: 0 4px 18px rgba(0,0,0,.5);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px rgba(77,163,247,.6);
  --success:        #22c55e;
  --success-bg:     rgba(34,197,94,.12);
  --success-border: rgba(74,222,128,.6);
  --success-text:   #86efac;
  --amber-bg:     rgba(245,158,11,.12);
  --amber-border: rgba(245,158,11,.35);
  --amber-text:   #fbbf24;
  --warning-border: rgba(251,191,36,.6);
  --info-bg:     rgba(77,163,247,.12);
  --info-border: rgba(77,163,247,.6);
  --info-text:   #a8d0fb;
  --danger:        #dc2626;                 /* white label 4.83:1 */
  --danger-600:    #b91c1c;                 /* 6.47:1 */
  --danger-bg:     rgba(239,68,68,.12);     /* resolves ~#2c2031 on --panel */
  --danger-border: rgba(248,113,113,.7);    /* 3.46:1 on --danger-bg */
  --danger-text:   #fca5a5;                 /* 8.15:1 on --danger-bg */
  /* shimmer reads as a light sweep on light, a lift on dark */
  --skeleton-bg: #1b2740;
  --shimmer-hi:  rgba(255,255,255,.10);
  color-scheme: dark;
}