/* ============================================================
   LanguageTracker — Color tokens  (DESIGN-SYSTEM SOURCE OF TRUTH)

   Aesthetic: Editorial Reference. Deep teal anchors the brand;
   warm cream + sand give breathing room. Contrast comes from
   weight, not decorative color. This is the canonical palette —
   the app codebase is a draft and does NOT override this.

   Layered as: (1) raw scales  (2) semantic aliases that map onto
   them. Components reference the semantic layer.
   ============================================================ */

:root {
  /* ─────────────────────────────────────────────────────────
     1. RAW SCALES
     ───────────────────────────────────────────────────────── */

  /* --- Teal — the anchor --------------------------------- */
  --teal-50:  #F0F7F5;
  --teal-100: #D6EAE5;
  --teal-200: #ADD4CC;
  --teal-300: #7FBBB0;
  --teal-400: #4E9E92;
  --teal-500: #1F8576;
  --teal-600: #0F766E;   /* PRIMARY brand */
  --teal-700: #115E59;   /* deep / pressed */
  --teal-800: #134E48;
  --teal-900: #123F3B;

  /* --- Warm neutrals (sand) + cream + ink ---------------- */
  --cream:    #FAFAF7;   /* warm off-white page ground */
  --paper:    #FFFFFF;   /* raised surfaces, cards, sidebar */
  --sand-50:  #F6F5F0;
  --sand-100: #EFEDE5;
  --sand-200: #E4E1D6;
  --sand-300: #D4D0C2;
  --sand-400: #B4AF9E;
  --sand-500: #8A8576;
  --ink:      #1A1A1A;   /* body text */

  /* --- Night (dark accents: hero, logomark lockups) ------ */
  --night-bg:    #0A0A0A;
  --night-muted: #8C8C84;

  /* --- Status scales ------------------------------------- */
  --danger-50:   #FBEDEA;   --danger-600:  #B23A28;   --danger-700:  #8F2E20;
  --warning-50:  #FBF3E2;   --warning-600: #A9781B;   --warning-700: #855E12;
  --success-50:  #ECF4EE;   --success-600: #2E7D46;   --success-700: #235E35;

  /* ─────────────────────────────────────────────────────────
     2. SEMANTIC ALIASES  (components reference these)
     ───────────────────────────────────────────────────────── */

  /* --- Brand --- */
  --brand:          var(--teal-600);
  --brand-strong:   var(--teal-700);
  --brand-tint:     var(--teal-50);
  --brand-contrast: #FFFFFF;
  --text-on-brand:  #FFFFFF;
  --text-link:      var(--teal-700);

  /* Legacy alias names kept so component CSS resolves --- */
  --gold:       var(--brand);
  --gold-light: var(--brand-strong);
  --gold-bg:    var(--brand-tint);

  /* --- Backgrounds / surfaces --- */
  --bg:             var(--cream);
  --bg-page:        var(--cream);
  --surface:        var(--paper);
  --surface-hover:  var(--sand-50);
  --surface-sunken: var(--sand-50);
  --bg-card:        var(--paper);
  --bg-elevated:    var(--sand-100);
  --bg-input:       #FFFFFF;
  --bg-hover:       var(--sand-50);
  --bg-active:      var(--sand-100);
  --bg-thead:       var(--sand-50);

  /* --- Text --- */
  --text:             var(--ink);
  --text-primary:     var(--ink);
  --text-soft:        #4A4A44;
  --text-secondary:   #4A4A44;
  --text-muted:       #7A766B;
  --text-placeholder: #A8A496;
  --text-disabled:    #A8A496;

  /* --- Borders --- */
  --border:        var(--sand-200);
  --border-strong: var(--sand-300);
  --border-focus:  var(--teal-600);

  /* --- Status (semantic, used by components) --- */
  --success:        var(--success-600);
  --success-bg:     var(--success-50);
  --success-border: #A9CDB4;
  --warning:        var(--warning-600);
  --warning-bg:     var(--warning-50);
  --warning-border: #DDBE7A;
  --error:          var(--danger-600);
  --error-bg:       var(--danger-50);
  --error-border:   #E0A99E;

  /* --- Focus / brand glow --- */
  --focus-ring:        rgba(15, 118, 110, 0.18);
  --border-focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.18);

  /* ─────────────────────────────────────────────────────────
     3. CEFR level badges (A1 beginner → C2 expert)
     ───────────────────────────────────────────────────────── */
  --level-a1: #2E7D32;   /* dark green   */
  --level-a2: #81C784;   /* light green  */
  --level-b1: #1565C0;   /* dark blue    */
  --level-b2: #64B5F6;   /* light blue   */
  --level-c1: #7B1FA2;   /* purple       */
  --level-c2: #E91E63;   /* pink         */

  /* ─────────────────────────────────────────────────────────
     4. Language accent system — muted jewel tones.
        Always paired with a flag emoji + text label.
     ───────────────────────────────────────────────────────── */
  --lang-es:      #C2410C;  --lang-es-tint:  #FBEDE6;  /* 🇪🇸 Spanish    */
  --lang-fr:      #1D4ED8;  --lang-fr-tint:  #E9EEFC;  /* 🇫🇷 French     */
  --lang-de:      #A16207;  --lang-de-tint:  #F8F1E2;  /* 🇩🇪 German     */
  --lang-it:      #15803D;  --lang-it-tint:  #E8F3EC;  /* 🇮🇹 Italian    */
  --lang-pt:      #6D28D9;  --lang-pt-tint:  #F0EBFB;  /* 🇵🇹 Portuguese */
  --lang-ja:      #BE123C;  --lang-ja-tint:  #FBE9ED;  /* 🇯🇵 Japanese   */
  --lang-zh:      #B91C1C;  --lang-zh-tint:  #FAE9E9;  /* 🇨🇳 Mandarin   */
  --lang-ko:      #0E7490;  --lang-ko-tint:  #E4F2F6;  /* 🇰🇷 Korean     */
  --lang-hi:      #C2410C;  --lang-hi-tint:  #FBEDE6;  /* 🇮🇳 Hindi      */
  --lang-ar:      #166534;  --lang-ar-tint:  #E9F2EC;  /* 🇸🇦 Arabic     */
  --lang-ur:      #047857;  --lang-ur-tint:  #E4F3EE;  /* 🇵🇰 Urdu       */
  --lang-ru:      #4338CA;  --lang-ru-tint:  #ECEBFA;  /* 🇷🇺 Russian    */
}