/* ============================================================
   LexusFX — Color tokens
   Base palette + semantic aliases. The system runs on THREE surfaces
   ("themes"): Carbon (dark, app), Paper (light, editorial), Flame (orange).
   Apply a surface class on a container: .lfx-carbon / .lfx-paper / .lfx-flame
   ============================================================ */
:root {
  /* ---- Brand orange (the one constant across every surface) ---- */
  --lfx-orange:          #FF6A00;
  --lfx-orange-bright:   #FF7E26;  /* hover on dark */
  --lfx-orange-deep:     #E25C00;  /* press / hover on light */
  --lfx-orange-hair:     #7A3410;  /* divider on an orange surface */
  --lfx-orange-tint:     #FFE7D4;  /* faint wash */

  /* ---- Carbon (dark) neutrals ---- */
  --carbon-900: #0A0A0A;  /* page */
  --carbon-850: #0F0F0E;
  --carbon-800: #141413;  /* raised card */
  --carbon-750: #1A1917;  /* inset stat box */
  --carbon-border: #2A2722;
  --carbon-text:  #F5F3EF;
  --carbon-muted: #9A958C;
  --carbon-faint: #5F5A52;

  /* ---- Paper (light / editorial) neutrals ---- */
  --paper-50:  #F8F6F0;
  --paper-100: #F4F1EA;  /* page */
  --paper-200: #EBE7DD;  /* raised */
  --paper-border: #D8D3C8;
  --paper-hair:   #CDC8BD;
  --paper-ink:   #15130F;
  --paper-body:  #46423B;
  --paper-muted: #6B665D;

  --white: #FFFFFF;

  /* ---- Semantic ---- */
  --green:      #36D27B;  /* "vagas / plazas" availability */
  --green-bg:   #103A27;
  --green-hair: #1C5A3C;
  --alert:      #FF6A5E;
}

/* ===================== SURFACE: CARBON (dark / app) ===================== */
.lfx-carbon {
  --bg:          var(--carbon-900);
  --surface:     var(--carbon-800);
  --surface-2:   var(--carbon-750);
  --border:      var(--carbon-border);
  --text:        var(--carbon-text);
  --text-muted:  var(--carbon-muted);
  --text-faint:  var(--carbon-faint);
  --accent:      var(--lfx-orange);
  --accent-hover:var(--lfx-orange-bright);
  --on-accent:   #0A0A0A;
  --rule:        var(--carbon-text);
  background: var(--bg);
  color: var(--text);
}

/* ===================== SURFACE: PAPER (light / editorial) ===================== */
.lfx-paper {
  --bg:          var(--paper-100);
  --surface:     var(--paper-50);
  --surface-2:   var(--paper-200);
  --border:      var(--paper-border);
  --text:        var(--paper-ink);
  --text-muted:  var(--paper-muted);
  --text-faint:  #928C81;
  --accent:      var(--lfx-orange);
  --accent-hover:var(--lfx-orange-deep);
  --on-accent:   #0A0A0A;
  --rule:        var(--paper-ink);
  background: var(--bg);
  color: var(--text);
}

/* ===================== SURFACE: FLAME (orange / the offer card) ===================== */
.lfx-flame {
  --bg:          var(--lfx-orange);
  --surface:     var(--lfx-orange);
  --surface-2:   #FF7E26;
  --border:      var(--lfx-orange-hair);
  --text:        #0A0A0A;
  --text-muted:  #7A3410;
  --text-faint:  #9A4A1C;
  --accent:      #0A0A0A;
  --accent-hover:#000000;
  --on-accent:   var(--lfx-orange);
  --rule:        #0A0A0A;
  background: var(--bg);
  color: var(--text);
}