/* ╔═══════════════════════════════════════════════════╗
   ║  KeegNation Fitness — Theme System                ║
   ║  Brightness: dark | light                         ║
   ║  Color:      fire | glacier | peony               ║
   ╚═══════════════════════════════════════════════════╝ */

/* ── Self-hosted Barlow fonts (local-first, zero latency) ── */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/Barlow-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Self-hosted secondary fonts ───────────────────── */

@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Variable.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('fonts/NotoSans-Variable.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Variable.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Variable.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Variable.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Variable.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Default: dark + fire ──────────────────────────── */
:root {
  color-scheme: dark;

  /* Accent */
  --red:         #CC0000;
  --red-hot:     #E8000A;
  --red-dark:    #990000;
  --red-dim:     #660000;
  --red-glow:    rgba(204,0,0,0.35);
  --orange:      #E85800;
  --orange2:     #FF7800;
  --accent-rgb:  204,0,0;
  --accent2-rgb: 232,88,0;

  /* Surfaces */
  --bg:          #0A0A0A;
  --surface:     #141414;
  --surface2:    #1E1E1E;
  --surface3:    #272727;
  --surface4:    #333333;
  --card:        #141414;

  /* Borders */
  --border:      #2A2A2A;
  --border2:     #333333;
  --border3:     #444444;
  --border-mid:  #3a3a3a;
  --border-light: #3a3a3a;

  /* Text */
  --text:        #FFFFFF;
  --text-rgb:    255,255,255;
  --text1:       #FFFFFF;
  --text2:       #CCCCCC;
  --text-sec:    #999999;
  --text-muted:  #b5b5b5;
  --text-dim:    #8f8f8f;
  --muted:       #888888;
  --dim:         #444444;

  /* Utility */
  --green:       #22CC44;
  --blue:        #2255CC;
  --blue-rest:   #2255CC;
  --gold:        #CC9900;
  --gold2:       #FFB900;
  --warn:        #E8A000;

  /* Heat zones (functional, not themed) */
  --heat-easy:     #3b82f6;
  --heat-moderate: #22c55e;
  --heat-hard:     #f59e0b;
  --heat-max:      var(--red);
}

/* ── Glacier accent ───────────────────────────────── */
[data-theme="glacier"] {
  --red:         #5A9BB0;
  --red-hot:     #6DB8CE;
  --red-dark:    #1B6B8A;
  --red-dim:     #1A3F4A;
  --red-glow:    rgba(90,155,176,0.35);
  --orange:      #1B6B8A;
  --orange2:     #4DB3CC;
  --accent-rgb:  90,155,176;
  --accent2-rgb: 27,107,138;
  --green:       #27D192;
  --blue:        #1796E3;
}

/* ── Peony accent ─────────────────────────────────── */
[data-theme="peony"] {
  --red:         #8B2252;
  --red-hot:     #A82860;
  --red-dark:    #6B1A3F;
  --red-dim:     #3A0E22;
  --red-glow:    rgba(139,34,82,0.35);
  --orange:      #D6347E;
  --orange2:     #E85A9A;
  --accent-rgb:  139,34,82;
  --accent2-rgb: 214,52,126;
  --green:       #27D192;
  --blue:        #1796E3;
}

/* ── Light brightness ─────────────────────────────── */
[data-brightness="light"] {
  color-scheme: light;

  --bg:          #F5F5F5;
  --surface:     #FFFFFF;
  --surface2:    #F0F0F0;
  --surface3:    #E8E8E8;
  --surface4:    #DDDDDD;
  --card:        #FFFFFF;
  --border:      #D0D0D0;
  --border2:     #C0C0C0;
  --border3:     #B0B0B0;
  --border-mid:  #C8C8C8;
  --border-light: #D8D8D8;
  --text:        #111111;
  --text-rgb:    17,17,17;
  --text1:       #111111;
  --text2:       #333333;
  --text-sec:    #555555;
  --text-muted:  #555555;
  --text-dim:    #777777;
  --muted:       #666666;
  --dim:         #AAAAAA;
  --red-dim:     #FFD5D5;
  --red-glow:    rgba(204,0,0,0.15);
  --gold:        #CC9900;
  --gold2:       #FFB900;
  --warn:        #B87800;
}

/* ── Dark + Glacier tinted surfaces ───────────────── */
[data-brightness="dark"][data-theme="glacier"] {
  --bg:       #080C0E;
  --surface:  #0F1517;
  --surface2: #161D20;
  --surface3: #1E272A;
  --surface4: #273234;
  --card:     #0F1517;
  --border:   #1E2E33;
  --border2:  #2A3B40;
  --border-mid: #253538;
  --border-light: #304548;
}

/* ── Dark + Peony tinted surfaces ─────────────────── */
[data-brightness="dark"][data-theme="peony"] {
  --bg:       #0C080A;
  --surface:  #150F12;
  --surface2: #1D161A;
  --surface3: #271E22;
  --surface4: #31272C;
  --card:     #150F12;
  --border:   #2E2228;
  --border2:  #3A2D33;
  --border-mid: #342830;
  --border-light: #42343B;
}

/* ── Light + Glacier tinted surfaces ──────────────── */
[data-brightness="light"][data-theme="glacier"] {
  --bg:       #F0F5F7;
  --surface:  #FFFFFF;
  --surface2: #ECF2F4;
  --surface3: #E2EBEE;
  --surface4: #D5E2E7;
  --card:     #FFFFFF;
  --border:   #B8CDD4;
  --border2:  #A8BFC7;
  --border-mid: #BED0D6;
  --border-light: #C5D6DC;
  --red-dim:     #D5EEF5;
  --red-glow:    rgba(90,155,176,0.15);
}

/* ── Light + Peony tinted surfaces ────────────────── */
[data-brightness="light"][data-theme="peony"] {
  --bg:       #F7F0F4;
  --surface:  #FFFFFF;
  --surface2: #F4ECF0;
  --surface3: #EDE2E8;
  --surface4: #E3D5DD;
  --card:     #FFFFFF;
  --border:   #D4B8C5;
  --border2:  #C7A8B8;
  --border-mid: #D0BEC8;
  --border-light: #DCC5D0;
  --red-dim:     #F5D5E5;
  --red-glow:    rgba(139,34,82,0.15);
}