/*
  CAREER PACKAGES — PROPOSED THEME TOKENS
  Derived from a pixel-sampled audit of the live careerpackages.net site.
  See Section 66 of the API-First Specification v2.1 for the full rationale.

  Structure:
    1. Raw color scales (do not use directly in components)
    2. Semantic tokens (use these everywhere else)
*/

:root {
  /* ---------------------------------------------------------------- */
  /* 1. RAW COLOR SCALES                                               */
  /* ---------------------------------------------------------------- */

  /* Brand orange — replaces the old #FF9800 / #FB9C04 / #EFAD4D drift */
  --orange-50:  #FFF3E0;
  --orange-100: #FFDDAE;
  --orange-200: #FFC169;
  --orange-300: #F5983A;
  --orange-400: #EA7E14;
  --orange-500: #D96A08;
  --orange-600: #B85706; /* primary brand orange */
  --orange-700: #8F4405;
  --orange-900: #5E2D03;
  --orange-accent: #FF9800; /* decorative only — logo, large fills, hero imagery. Never behind text. */

  /* Action green — refined from the live #61CF70 */
  --green-50:  #EAF7EE;
  --green-100: #B9E8C5;
  --green-200: #7FD494;
  --green-400: #4CBE68;
  --green-500: #2FA34D; /* primary action green */
  --green-600: #22803B;
  --green-800: #175E2A;

  /* Neutral scale — replaces ad hoc #282828 / #54595F / #F7F7F7 / #F5FAFE */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F6F5;
  --neutral-100: #E9E9E7;
  --neutral-300: #C7C6C2;
  --neutral-500: #96958F;
  --neutral-700: #5C5B56;
  --neutral-850: #33322F;
  --neutral-950: #1D1C1A; /* replaces both old #282828 and #000000 */

  /* New semantic colors — did not exist anywhere on the old site */
  --info-500:    #2E75D6;
  --error-500:   #D6402F;
  --warning-500: #E0A511;

  /* ---------------------------------------------------------------- */
  /* 2. SEMANTIC TOKENS — use these in components, not the raw scales  */
  /* ---------------------------------------------------------------- */

  /* Brand — functional (text-bearing) vs. decorative (logo/hero/large fills) */
  --color-brand: var(--orange-600);
  --color-brand-hover: var(--orange-700);
  --color-brand-subtle-bg: var(--orange-50);
  --color-brand-decorative: var(--orange-accent); /* logo, hero fills, illustration accents only — never with small text on top */

  /* Primary action (buttons, links that trigger something) */
  --color-action: var(--green-500);
  --color-action-hover: var(--green-600);
  --color-action-subtle-bg: var(--green-50);
  --color-action-text-on-fill: var(--neutral-0);

  /* Text */
  --text-primary: var(--neutral-850);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-on-dark: var(--neutral-50);
  --text-on-dark-muted: var(--neutral-300);

  /* Surfaces / backgrounds */
  --bg-page: var(--neutral-0);
  --bg-section-alt: var(--neutral-50);
  --bg-card: var(--neutral-0);
  --bg-dark: var(--neutral-950); /* nav bar, footer, dark cards */

  /* Borders / dividers */
  --border-default: var(--neutral-100);
  --border-strong: var(--neutral-300);

  /* Semantic states */
  --color-info: var(--info-500);
  --color-error: var(--error-500);
  --color-warning: var(--warning-500);
  --color-success: var(--green-500);

  /* Links (body copy, inline) */
  --link-color: var(--color-info);
  --link-color-hover: #1D5AB0;

  /* Radius / misc, kept here so components pull one consistent value */
  --radius-default: 8px;
  --radius-pill: 999px;
}

/*
  Optional dark-mode variant.
  Flips the neutral scale; brand/action/semantic hues stay the same
  so the identity doesn't shift between modes, only the chrome does.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page: var(--neutral-950);
    --bg-section-alt: #26251F;
    --bg-card: #26251F;
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-300);
    --text-muted: var(--neutral-500);
    --border-default: #3A3934;
    --border-strong: var(--neutral-700);
    --color-brand-subtle-bg: #3A2A12;
    --color-action-subtle-bg: #17301F;
  }
}