/* Taichung Job Service — Color tokens
   Palette derived from the client logo: 勞動部勞動力發展署 / Workforce Development Agency,
   Ministry of Labor (assets/logo.png). Sampled logo values: teal #60C0C0 + #90D8D8,
   orange #F07830, yellow #FCCC00, ring gray #D8D8D8, wordmark gray #545454.

   ACCESSIBILITY NOTE — the audience is middle-aged and older Taiwanese kiosk users.
   The logo teal (#60C0C0) is far too light for text (≈1.9:1 on light backgrounds), so all
   display and body type uses the derived DEEP teals below (#0F595E ≈ 7.6:1, #083E42 ≈ 11:1).
   Use pure logo teal for SURFACES, borders and fills only — never for type.

   Convention: every neutral shadow tints DEEP TEAL rgba(8,62,66,α); never plain black. */
:root {
  /* --- Logo primaries (surfaces / fills / borders — NOT type) --- */
  --color-teal: #60c0c0;          /* logo teal */
  --color-teal-light: #90d8d8;    /* logo light teal */
  --color-orange: #f07830;        /* logo orange — accent, chevrons, focus */
  --color-yellow: #fccc00;        /* logo yellow — highlights & fills only, never type */

  /* --- Derived text-safe brand teals --- */
  --color-primary-teal: #0f595e;  /* titles, labels, select text, primary button */
  --color-deep-teal: #083e42;     /* primary button gradient end; backdrop tint base */
  --color-orange-deep: #c25718;   /* text-safe orange — large text & icons only (≈4.3:1) */

  /* --- Text --- */
  --color-text: #234a4d;          /* body default (≈9.4:1 on base) */
  --color-muted: #5a6b6c;         /* footer, modal body, ghost button */
  --color-light-text: #8a9a9b;    /* tertiary — non-essential copy only */

  /* --- Surfaces --- */
  --color-bg-base: #fbfaf7;       /* theme color — warm near-white, low glare */
  --color-bg-tint: #eff6f6;       /* soft teal surface tint */
  --color-card: rgba(255,255,255,.9);
  --color-border-soft: #dce5e5;   /* ghost button border, hairlines */
  --color-ring-gray: #d8d8d8;     /* logo outer ring gray */

  /* --- Semantic (portal/chat screens) --- */
  --color-success: #2f9e64;
  --color-info-blue: #2f7fbf;
  --color-neutral-gray: #9c9c9c;
  --color-danger: #d64525;

  /* --- Card variant accents (sanctioned rgba exceptions) --- */
  --card-interactive-icon: #c25718;               /* orange variant */
  --card-interactive-shadow: rgba(194,87,24,.12);
  --card-interactive-shadow-hover: rgba(194,87,24,.2);
  --card-job-icon: #0f595e;                       /* teal variant */
  --card-job-shadow: rgba(15,89,94,.12);
  --card-job-shadow-hover: rgba(15,89,94,.2);

  /* --- Semantic aliases --- */
  --text-primary: var(--color-text);
  --text-heading: var(--color-primary-teal);
  --text-secondary: var(--color-muted);
  --accent: var(--color-orange);
  --surface-page: var(--color-bg-base);
  --surface-card: var(--color-card);
  --border-default: var(--color-border-soft);
  --focus-ring: rgba(240,120,48,.3); /* orange 4px focus ring — highest-visibility cue */
}