/* ============================================================
   AI Upskill Coach — Colour
   "Two colours do the lifting: on the onyx ground, ivory
   carries the copy and gold drives the action."
   ============================================================ */

:root {
  /* ---- Base palette (raw brand values) ---------------- */
  --onyx:           #0D0D0F; /* default canvas · background        */
  --rich-black:     #16161A; /* cards · raised surfaces            */
  --champagne-gold: #C8A24B; /* primary accent · CTAs              */
  --bright-gold:    #E6C778; /* hover · gradient top               */
  --deep-gold:      #A67C2E; /* gradient base · pressed gold       */
  --ivory:          #F4EFE6; /* primary text on dark grounds       */
  --warm-grey:      #A6A29A; /* secondary text · captions          */
  --deep-emerald:   #1F4A3F; /* secondary accent · rare            */

  /* ---- Extended neutrals (derived, onyx-family) ------- */
  --onyx-900: #0D0D0F;
  --onyx-800: #16161A;
  --onyx-700: #1E1E23;
  --onyx-600: #2A2A30;
  --onyx-500: #3A3A42;
  --hairline: rgba(244, 239, 230, 0.10); /* fine 1px rules on onyx */
  --hairline-strong: rgba(244, 239, 230, 0.16);

  /* ---- Ivory tints (for light-ground layouts) --------- */
  --ivory-100: #FBF9F4;
  --ivory-200: #F4EFE6;
  --ivory-300: #E7E0D2;

  /* ---- Gold gradients --------------------------------- */
  --gradient-gold: linear-gradient(120deg, #E6C778 0%, #C8A24B 52%, #A67C2E 100%); /* @kind color */
  --gradient-gold-muted: linear-gradient(120deg, #C8A24B 0%, #A67C2E 100%); /* @kind color */
  /* soft radial bloom over onyx for hero glows */
  --glow-gold: radial-gradient(60% 60% at 50% 40%, rgba(230, 199, 120, 0.22) 0%, rgba(200, 162, 75, 0.08) 38%, transparent 72%); /* @kind color */

  /* ---- Semantic roles --------------------------------- */
  --surface-base:    var(--onyx);        /* page background        */
  --surface-card:    var(--rich-black);  /* raised cards           */
  --surface-raised:  var(--onyx-700);    /* nested / hover surfaces */
  --surface-inverse: var(--ivory);       /* light-ground sections  */

  --text-primary:    var(--ivory);       /* copy on dark           */
  --text-secondary:  var(--warm-grey);   /* captions, meta         */
  --text-on-light:   var(--onyx);        /* copy on ivory          */
  --text-on-gold:    var(--onyx);        /* copy on gold button     */
  --text-accent:     var(--champagne-gold);

  --accent:          var(--champagne-gold);
  --accent-hover:    var(--bright-gold);
  --accent-pressed:  var(--deep-gold);

  --border-subtle:   var(--hairline);
  --border-strong:   var(--hairline-strong);
  --focus-ring:      rgba(230, 199, 120, 0.55);

  /* ---- Status (kept quiet, brand-tinted) -------------- */
  --success: var(--deep-emerald);
  --success-text: #6FB99F;
  --danger: #B9554B;
  --warning: var(--champagne-gold);
}