/* ── CSS Variables – Light Mode (01_easytel) ── */
:root {
  /* Brand / semantic — 01_easytel */
  --et-primary01:          #1d1e2c;   /* easytel-black */
  --et-primary01-80:       #3a3d5b;   /* easytel-black-80% */
  --et-popup-grey:         #4e4b49;   /* easytel-popup-grey */
  --et-primary02-60:       #A58787;
  --et-primary02-80:       #6c625b;   /* easytel-darkgrey */
  --et-primary02-10:       #EFEAE3;   /* easytel-darkgrey-10% */
  --et-grey:               #998d84;   /* easytel-grey */
  --et-secondary01:        #7692ff;   /* easytel-indigo (CTA) */
  --et-secondary01-60:     #7692ff99;
  --et-secondary01-20:     #7692ff33;
  --et-highlight01:        #e39af3;   /* easytel-lilac */
  --et-highlight01-60:     rgba(227,154,243,0.6);
  --et-highlight01-15:     rgba(227,154,243,0.15);
  --et-creme:              #efeae3;   /* easytel-creme */
  --et-dark-match:         #728a6d;   /* dark-match */
  --et-matcha:             #d3e6c7;   /* easytel-matcha */
  --et-matcha-60:          #e9f6da;

  /* Surfaces */
  --et-background:         #eeeeee;   /* easytel-white */
  --et-white-background:   #f7f7f2;   /* easytel-white-background */
  --et-white:              #ffffff;
  --et-white-2:            #ffffff;
  --et-card-bg:            #ffffff;
  --et-sidebar-bg:         #1d1e2c;   /* dark sidebar stays dark in light mode */

  /* Notifications */
  --et-success:            #00b67a;
  --et-success-light:      rgba(0,182,122,0.6);
  --et-warning:            #FF0008;
  --et-warning-light:      #ff000866;
  --et-caution:            #fbbc04;
  --et-caution-light:      #fbbc0480;

  /* Structure */
  --et-transition:         0.2s ease;

  /* Text on dark sidebar */
  --et-sidebar-text:       #ffffff;
  --et-sidebar-muted:      rgba(255,255,255,0.6);
  --et-black-2:            #1d1e2c;

  --et-bg-paypal:          #FFCD00;   /* paypal-bg */
  --et-bg-paypal-hover:    #f0b92b; /* paypal-bg-hover */

  --et-input-placeholder:        #998d84;
  --et-input-outline:            #7692ff;

  /* ── Font Variables (format: font shorthand + letter-spacing) ── */

  /* Headlines Desktop – TT Commons Pro */
  --font-h1-desktop:        normal 600 60px/64px "TT Commons Pro", sans-serif;
  --ls-h1-desktop:          -1.8px;

  --font-h2-desktop:        normal 600 32px/36px "TT Commons Pro", sans-serif;
  --ls-h2-desktop:          -0.64px;

  --font-h3-desktop:        normal 600 20px/26px "TT Commons Pro", sans-serif;
  --ls-h3-desktop:          0px;

  --font-h4-desktop:        normal 600 18px/normal "TT Commons Pro", sans-serif;
  --ls-h4-desktop:          1.8px;

  /* Headlines Mobile – TT Commons Pro */
  --font-h1-mobile:         normal 600 38px/42px "TT Commons Pro", sans-serif;
  --ls-h1-mobile:           -1.14px;

  --font-h2-mobile:         normal 600 24px/30px "TT Commons Pro", sans-serif;
  --ls-h2-mobile:           -0.48px;

  /* Body Copy Desktop – TT Commons Pro */
  --font-copy18-regular:    normal 300 18px/24px "TT Commons Pro", sans-serif;
  --ls-copy18-regular:      0.36px;

  --font-copy16-regular:    normal 300 16px/24px "TT Commons Pro", sans-serif;
  --ls-copy16-regular:      0.32px;

  --font-copy16-medium:     normal 400 16px/24px "TT Commons Pro", sans-serif;
  --ls-copy16-medium:       0.32px;

  --font-copy16-demibold:   normal 500 16px/22px "TT Commons Pro", sans-serif;
  --ls-copy16-demibold:     0.32px;

  --font-copy14-link:       normal 500 14px/16px "TT Commons Pro", sans-serif;
  --ls-copy14-link:         0.28px;

  /* Small Copy Mobile – Poppins */
  --font-copy14-regular:    normal 300 14px/21px "TT Commons Pro", sans-serif;
  --ls-copy14-regular:      0px;

  --font-copy14-medium:     normal 300 14px/18px "TT Commons Pro", sans-serif;
  --ls-copy14-medium:       0.28px;

  --font-copy14-semibold:   normal 500 14px/21px "TT Commons Pro", sans-serif;
  --ls-copy14-semibold:     0px;


  --font-copy14-demibold:   normal 500 14px/18px "TT Commons Pro", sans-serif;
  --ls-copy14-demibold:     0.28px;

  /* Labels / UI – Poppins */
  --font-label12-medium:    normal 400 13px/15px "TT Commons Pro", sans-serif;
  --ls-label12-medium:      normal;

  --font-label12-semibold:  normal 500 13px/15px "TT Commons Pro", sans-serif;
  --ls-label12-semibold:    normal;

  --font-label12-demibold:  normal 600 13px/15px "TT Commons Pro", sans-serif;
  --ls-label12-demibold:    normal;

  /* Input / Feedback – Poppins */
  --font-input:             normal 300 16px/24px "TT Commons Pro", sans-serif;
  --font-input-placeholder: normal 300 14px/21px "TT Commons Pro", sans-serif;
  --ls-input-placeholder:   0.3px;
  --font-feedback:          normal 300 12px/1 "TT Commons Pro", sans-serif;

  /* Special */
  --font-tariff-data:       normal 600 30px/1 "TT Commons Pro", sans-serif;
  --font-dashboard-semi:    normal 500 14px/18px "TT Commons Pro", sans-serif;
  --font-dashboard-regular: normal 300 14px/18px "TT Commons Pro", sans-serif;
  --ls-dashboard-semi:      0.28px;
  --ls-dashboard-regular:   0.28px;

  /* Labels */
  --font-input-title:       normal 500 13px/20px "TT Commons Pro", sans-serif;
  --ls-input-title:         0.65px;

  --font-overline:          normal 600 14px/normal "TT Commons Pro", sans-serif;
  --ls-overline:            1.4px;

  --font-chip-text:          normal 400 13px/normal "TT Commons Pro", sans-serif;
  --ls-chip-text:            none;

  --border-radius-0:        0px;
  --border-radius-12:       12px;
  --border-radius-16:       16px;
  --border-radius-18:       18px;
  --border-radius-24:       24px;
  --border-radius-32:       32px;
  --border-radius-50:       50%;
  --border-radius-100:      100px;
}

/* Dark mode via OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --et-primary01:          #efeae3;
    --et-primary01-80:       #e4dbd4;
    --et-popup-grey:         #e4dbd4;
    --et-primary02-60:       #A58787;   /* same as light, looks good on dark bg too */
    --et-primary02-80:       #D3C9C1;   /* easytel-darkgrey dark */
    --et-primary02-10:       #2d2f49;   /* easytel-darkgrey-10% dark */
    --et-grey:               #c0b5a6;   /* easytel-grey dark */
    --et-secondary01:        #7692ff;
    --et-secondary01-60:     rgba(132,155,245,0.6);   /* 849bf5 @ 60% */
    --et-secondary01-20:     rgba(118,146,255,0.2);
    --et-highlight01:        #c77dd7;
    --et-highlight01-60:     #631a73;
    --et-highlight01-15:     #631a73;
    --et-creme:              #2d2f49;
    --et-dark-match:         #b9c7b7;
    --et-matcha:             #536f59;
    --et-matcha-60:          rgba(83,111,89,0.6);
    --et-background:         #171827;
    --et-white-background:   #171827;
    --et-white:              #1d1e2c;
    --et-white-2:            #ffffff;
    --et-card-bg:            #1d1e2c;
    --et-sidebar-bg:         #0f1020;
    --et-success:            #00b67a;
    --et-success-light:      rgba(0,182,122,0.3);
    --et-warning:            #ff595e;
    --et-warning-light:      rgba(255,89,94,0.8);
    --et-caution:            #da9603;
    --et-caution-light:      #fba5047a;
    --et-sidebar-text:       #efeae3;
    --et-sidebar-muted:      rgba(239,234,227,0.6);
    --et-black-2:            #1d1e2c;
    --et-bg-paypal:          #FFCD00;   /* paypal-bg */
    --et-bg-paypal-hover:    #f0b92b; /* paypal-bg-hover */
    --et-input-placeholder:        #998d84;
    --et-input-outline:            #7692ff99;
  }
}
body {   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-rendering: optimizeLegibility; }
body,
.et-wrap,
div.wp-site-blocks {
  font-family: "TT Commons Pro", sans-serif;
}