/* ====================================================
   ELF Design System 2.0 — Three-Tier Token System
   ====================================================
   Tier 1: --prim-*         Raw palette values
   Tier 2: --brand, --btn-* Semantic roles
   Tier 3: --button-*       Component-specific
   ==================================================== */

/* ── TIER 1: PRIMITIVE PALETTE ──────────────────────── */
:root {
  /* Blue */
  --prim-blue-10:  #E5F5FF;
  --prim-blue-20:  #B7E2FF;
  --prim-blue-30:  #8AD0FF;
  --prim-blue-40:  #5CBEFF;
  --prim-blue-50:  #2EABFF;
  --prim-blue-60:  #008FEF;
  --prim-blue-70:  #006CB6;
  --prim-blue-80:  #005F9D;
  --prim-blue-90:  #004675;
  --prim-blue-100: #002E4C;

  /* Orange */
  --prim-orange-10:  #FFEEE9;
  --prim-orange-20:  #FFCAB7;
  --prim-orange-30:  #FFA585;
  --prim-orange-40:  #FF8153;
  --prim-orange-50:  #EE561F;
  --prim-orange-60:  #CC410E;
  --prim-orange-70:  #AA2E02;
  --prim-orange-80:  #882400;
  --prim-orange-90:  #661B00;
  --prim-orange-100: #441200;

  /* Green */
  --prim-green-10:  #ECFFF8;
  --prim-green-20:  #B7F0DA;
  --prim-green-30:  #82E1BC;
  --prim-green-40:  #4DD29E;
  --prim-green-50:  #26C080;
  --prim-green-60:  #0C9060;
  --prim-green-70:  #19B27A;
  --prim-green-80:  #0A7050;
  --prim-green-90:  #055038;
  --prim-green-100: #033020;

  /* Red */
  --prim-red-10:  #FFECEC;
  --prim-red-20:  #FFD1D1;
  --prim-red-30:  #FFB3B3;
  --prim-red-40:  #FF8F8F;
  --prim-red-50:  #FF5555;
  --prim-red-60:  #D92D2D;
  --prim-red-70:  #B81818;
  --prim-red-80:  #950E0E;
  --prim-red-90:  #700808;
  --prim-red-100: #4A0404;

  /* Yellow */
  --prim-yellow-10:  #FFF4E6;
  --prim-yellow-20:  #FFE0B2;
  --prim-yellow-30:  #FFCC82;
  --prim-yellow-40:  #FFB952;
  --prim-yellow-50:  #FFA724;
  --prim-yellow-60:  #F79009;
  --prim-yellow-70:  #C96D00;
  --prim-yellow-80:  #A55E00;
  --prim-yellow-90:  #7A4400;
  --prim-yellow-100: #4F2B00;

  /* Grey */
  --prim-grey-10:  #F6F6F6;
  --prim-grey-20:  #EBEBEB;
  --prim-grey-30:  #D4D4D4;
  --prim-grey-40:  #B5BEC4;
  --prim-grey-50:  #9DA7AE;
  --prim-grey-60:  #8B979E;
  --prim-grey-70:  #6F7A80;
  --prim-grey-80:  #4A5568;
  --prim-grey-90:  #31383C;
  --prim-grey-100: #1A1F23;

  /* Purple */
  --prim-purple-10: #F7F4FF;
  --prim-purple-20: #E2D2FF;
  --prim-purple-30: #CCB1FF;
  --prim-purple-40: #B08BF6;
  --prim-purple-50: #9774D9;
  --prim-purple-60: #7F5FBC;
  --prim-purple-70: #684C9F;
  --prim-purple-80: #533A82;
  --prim-purple-90: #3E2A64;

  /* Pink */
  --prim-pink-10: #FFF1FB;
  --prim-pink-20: #FFC7EF;
  --prim-pink-30: #FF9DE3;
  --prim-pink-40: #FF74D7;
  --prim-pink-50: #EC63C5;
  --prim-pink-60: #CF50AB;
  --prim-pink-70: #B23E91;
  --prim-pink-80: #952F78;
  --prim-pink-90: #77225F;

  /* Special */
  --prim-grey-white: #FFFFFF;
  --prim-grey-black: #000000;
}

/* ── TIER 2: SEMANTIC TOKENS — commercial-lt (default) ─ */
:root {
  /* Brand */
  --brand:       var(--prim-blue-70);
  --brand-dk:    var(--prim-blue-80);
  --brand-lt:    var(--prim-blue-10);
  --brand-ghost: rgba(0,108,182,0.08);

  /* Button surface tokens */
  --btn-primary-bg:   var(--prim-blue-70);
  --btn-secondary-bg: var(--prim-blue-10);
  --btn-tertiary-bg:  #EDF6FF;
  --btn-disabled-bg:  #F5F5F5;
  --btn-success-bg:   var(--prim-green-70);
  --btn-alert-bg:     var(--prim-yellow-60);
  --btn-error-bg:     var(--prim-red-60);
  --btn-info-bg:      var(--prim-blue-60);

  /* Background tokens */
  --bg-screen:   var(--prim-grey-10);
  --bg-card:     var(--prim-grey-white);
  --bg-active:   #F8FAFC;
  --bg-disabled: #F5F5F5;
  --bg-success:  var(--prim-green-10);
  --bg-alert:    var(--prim-yellow-10);
  --bg-error:    var(--prim-red-10);
  --bg-info:     var(--prim-blue-10);

  /* Text tokens */
  --text-on-brand:  var(--prim-grey-white);
  --text-brand:     var(--prim-blue-70);
  --text-default:   var(--prim-grey-black);
  --text-secondary: var(--prim-grey-90);
  --text-tertiary:  var(--prim-grey-70);
  --text-disabled:  var(--prim-grey-50);
  --text-success:   var(--prim-green-70);
  --text-alert:     var(--prim-yellow-60);
  --text-error:     var(--prim-red-60);
  --text-info:      var(--prim-blue-60);

  /* Border tokens */
  --border-btn:      var(--prim-blue-90);
  --border-card:     #E9EAEB;
  --border-disabled: var(--prim-grey-40);
  --border-success:  var(--prim-green-60);
  --border-alert:    var(--prim-yellow-80);
  --border-error:    var(--prim-red-80);

  /* Shadow tokens */
  --shadow-brand:    0px 12px 40px rgba(0,108,182,0.12);
  --shadow-brand-sm: 0px 4px 16px rgba(0,108,182,0.08);
  --shadow-brand-xs: 0px 2px 8px  rgba(0,108,182,0.08);

  /* Legacy aliases — keeps existing component CSS working without changes */
  --text-1:      var(--text-default);
  --text-2:      var(--text-secondary);
  --text-3:      var(--text-tertiary);
  --border:      var(--border-card);
  --surface:     var(--bg-card);
  --bg:          var(--bg-screen);
  --error:       var(--btn-error-bg);
  --success:     var(--btn-success-bg);
  --alert:       var(--btn-alert-bg);
  --disabled-bg: var(--btn-disabled-bg);
  --disabled-fg: var(--text-disabled);
  --disabled:    var(--text-disabled);

  /* CHROME BRAND — frozen at commercial-lt blue, never overridden by any theme */
  --chrome-brand:    #006CB6;
  --chrome-brand-dk: #005F9D;
  --chrome-brand-lt: #E5F5FF;
}

/* ── TIER 2: RESIDENTIAL-LT OVERRIDES ──────────────────── */
html.theme-residential-lt {
  --brand:       var(--prim-orange-50);
  --brand-dk:    var(--prim-orange-60);
  --brand-lt:    var(--prim-orange-10);
  --brand-ghost: rgba(238,86,31,0.08);

  --btn-primary-bg:   var(--prim-orange-50);
  --btn-secondary-bg: #F5DED5;
  --btn-tertiary-bg:  #FFF7F5;

  --bg-screen: #E4E4E4;
  --bg-card:   var(--prim-grey-20);
  --bg-active: #DFDAD8;

  --text-brand: var(--prim-orange-50);

  --border-btn:  var(--prim-orange-90);
  --border-card: #E2DDD8;

  /* rgba focus rings encode the brand hue — must override explicitly */
  --checkbox-focus-ring:    rgba(238,86,31,0.4);
  --checkbox-hover-layer:   rgba(238,86,31,0.08);
  --checkbox-pressed-layer: rgba(238,86,31,0.2);
  --input-focus-ring:       rgba(238,86,31,0.4);
  --brand-ghost:            rgba(238,86,31,0.08);
}

/* ── TIER 3: COMPONENT TOKENS ───────────────────────── */
:root {
  /* Button */
  --button-primary-bg:       var(--btn-primary-bg);
  --button-primary-fg:       var(--text-on-brand);
  --button-primary-hover-bg: var(--brand-dk);
  --button-secondary-bg:     var(--bg-card);
  --button-secondary-fg:     var(--brand);
  --button-secondary-border: var(--brand);
  --button-tertiary-bg:      var(--bg-card);
  --button-tertiary-fg:      var(--brand);
  --button-disabled-bg:      var(--btn-disabled-bg);
  --button-disabled-fg:      var(--text-disabled);
  --button-success-bg:       var(--btn-success-bg);
  --button-alert-bg:         var(--btn-alert-bg);
  --button-error-bg:         var(--btn-error-bg);
  --button-info-bg:          var(--btn-info-bg);
  --button-focus-ring:       var(--brand);

  /* Alert */
  --alert-bg:             var(--bg-card);
  --alert-border:         var(--border-card);
  --alert-progress-track: var(--btn-disabled-bg);
  --alert-progress-fill:  var(--brand);
  --alert-action-bg:      var(--bg-screen);
  --alert-action-fg:      var(--brand);

  /* Chip */
  --chip-default-bg:     transparent;
  --chip-default-fg:     var(--text-default);
  --chip-default-border: var(--border-card);
  --chip-active-bg:      var(--brand-lt);
  --chip-active-fg:      var(--brand);
  --chip-hover-bg:       var(--brand-lt);

  /* Checkbox */
  --checkbox-checked-bg:      var(--brand);
  --checkbox-focus-ring:      rgba(0,108,182,0.4);
  --checkbox-hover-layer:     var(--brand-ghost);
  --checkbox-pressed-layer:   rgba(0,108,182,0.2);
  --checkbox-disabled-border: var(--border-disabled);

  /* Input */
  --input-bg:             var(--bg-card);
  --input-border-default: var(--border-card);
  --input-border-hover:   var(--brand);
  --input-border-focus:   var(--brand);
  --input-border-success: var(--prim-green-60);
  --input-border-alert:   #dc6803;
  --input-border-error:   #b91616;
  --input-focus-ring:     rgba(0,108,182,0.4);

  /* Progress */
  --progress-fill-bg:  var(--brand);
  --progress-track-bg: var(--bg-screen);

  /* Breadcrumb */
  --breadcrumb-link-fg:    var(--brand);
  --breadcrumb-default-fg: var(--text-disabled);
  --breadcrumb-current-fg: var(--text-default);
  --breadcrumb-sep-fg:     var(--text-disabled);

  /* Icons */
  --icon-brand-fill: var(--brand);
  --icon-brand-bg:   var(--brand-lt);
}