/* 🎨 Theme Colors & Font Sizes System
/* 🎨 Theme Colors & Font Sizes System
   Combined typography and color variables
=========================================== */

  /* Light Theme Variables */
  :root {
      /* Font Families - Modern System Stack */
      --fontO: 'Oswald', sans-serif;
      --fontH: 'Noto Sans', sans-serif;
      --fontB: 'Noto Sans', sans-serif;
      --fontBa: 'Noto Sans', sans-serif;
      --fontC: 'Fira Mono', monospace;

      /* ===============================
       🔹 Core Font Size Levels (16px base)
       =============================== */
      --font-size-small: 15px;
      /* -1px from base */
      --font-size-medium: 16px;
      /* Base size */
      --font-size-large: 17px;
      /* +1px from base */

      /* Active base size (dynamic) */
      --font-size-base: var(--font-size-medium);

      /* ===============================
       🔹 Explicit Target Sizes (Comments added as requested)
       =============================== */

      /* 8px */
      --font-8: calc(var(--font-size-base) - 8px);

      /* 9px */
      --font-9: calc(var(--font-size-base) - 7px);

      /* 10px */
      --font-10: calc(var(--font-size-base) - 6px);

      /* 11px */
      --font-11: calc(var(--font-size-base) - 5px);

      /* 12px */
      --font-12: calc(var(--font-size-base) - 4px);

      /* 13px */
      --font-13: calc(var(--font-size-base) - 3px);

      /* 14px */
      --font-14: calc(var(--font-size-base) - 2px);

      /* 15px */
      --font-15: calc(var(--font-size-base) - 1px);

      /* 16px */
      --font-16: var(--font-size-base);

      /* 17px */
      --font-17: calc(var(--font-size-base) + 1px);

      /* 18px */
      --font-18: calc(var(--font-size-base) + 2px);

      /* 19px */
      --font-19: calc(var(--font-size-base) + 3px);

      /* 20px */
      --font-20: calc(var(--font-size-base) + 4px);

      /* 21px */
      --font-21: calc(var(--font-size-base) + 5px);

      /* 22px */
      --font-22: calc(var(--font-size-base) + 6px);

      /* 23px */
      --font-23: calc(var(--font-size-base) + 7px);

      /* 24px */
      --font-24: calc(var(--font-size-base) + 8px);

      /* 26px*/
      --font-26: calc(var(--font-size-base) + 10px);

      /* 27px */
      --font-27: calc(var(--font-size-base) + 11px);

      /* 28px */
      --font-28: calc(var(--font-size-base) + 12px);

      /* 29px */
      --font-29: calc(var(--font-size-base) + 13px);

      /* 30px */
      --font-30: calc(var(--font-size-base) + 14px);

      /* 32px */
      --font-32: calc(var(--font-size-base) + 16px);

      /* 35px */
      --font-35: calc(var(--font-size-base) + 19px);

      /* 36px */
      --font-36: calc(var(--font-size-base) + 20px);

      /* 40px */
      --font-40: calc(var(--font-size-base) + 24px);

      /* 48px */
      --font-48: calc(var(--font-size-base) + 32px);

      /* 60px */
      --font-60: calc(var(--font-size-base) + 44px);

      /* Aliases for backward compatibility in legacy code */
      --font-xl: var(--font-28);
      --font-lg: var(--font-24);
      --font-md: var(--font-20);
      --font-sm: var(--font-14);
      --font-xs: var(--font-12);
      --font-16: var(--font-size-base);
      /* Already exists but for clarity */


      /* Smooth transition for accessibility */
      transition: font-size 0.25s ease, line-height 0.25s ease;

      /* ===============================
       🔹 Font Weights
       =============================== */
      --font-weight-light: 300;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --font-weight-black: 800;

      /* ===============================
       🔹 Line Heights
       =============================== */
      --line-height-none: 1;
      --line-height-extra-tight: 1.1;
      --line-height-tight: 1.2;
      --line-height-normal: 1.3125;
      /* Twitter line height */
      --line-height-relaxed: 1.5;
      --line-height-extra-relaxed: 1.6;
      --line-height-loose: 1.75;

      /* ===============================
       🎨 Color Variables - Light Theme
       =============================== */
      /* Primary Colors - Material Design Light */
      --primary-color: #6200EE;
      --primary-color-rgb: 98, 0, 238;
      --primary-variant: #3700B3;
      --primary-hover: #4c00b8;

      /* Secondary Colors - Material Design Light */
      --secondary-color: #03DAC6;
      --secondary-color-rgb: 3, 218, 198;
      --secondary-variant: #018786;
      --secondary-hover: #02a396;

      /* Text Colors - Material Design Light */
      --text-primary: #000000;
      --text-primary-rgb: 0, 0, 0;
      --text-secondary: rgba(0, 0, 0, 0.60);
      --text-secondary-rgb: 0, 0, 0;
      --text-muted: rgba(0, 0, 0, 0.38);
      --text-muted-rgb: 0, 0, 0;
      --text-disabled: rgba(0, 0, 0, 0.38);
      --text-light: #fff;
      --text-light-rgb: 255, 255, 255;
      --text-content: #262626;
      /* Slightly off-black for content */

      /* Background Colors - Material Design Light */
      --bg-primary: #FFFFFF;
      --bg-primary-rgb: 255, 255, 255;
      --bg-secondary: #F5F5F5;
      --bg-secondary-rgb: 245, 245, 245;
      --bg-tertiary: #EEEEEE;
      --bg-tertiary-rgb: 238, 238, 238;

      /* Surface Colors - Material Design Light */
      --surface-color: #FFFFFF;
      --surface-variant: #F5F5F5;

      /* Border Colors */
      --border-color: #ebebeb;
      --border-color-rgb: 239, 243, 244;
      --border-color-dark: #eaeaea;
      --border-color-dark-rgb: 234, 234, 234;

      /* Scrollbar Colors */
      --scrollbar-track: var(--bg-secondary);
      --scrollbar-thumb: var(--text-muted);
      --scrollbar-thumb-hover: var(--text-secondary);

      /* Accent Colors - Material Design Light */
      --accent-blue: #1D9BF0;
      --accent-blue-rgb: 29, 155, 240;
      --accent-purple: #6200EE;
      --accent-purple-rgb: 98, 0, 238;
      --accent-teal: #03DAC6;
      --accent-teal-rgb: 3, 218, 198;
      --accent-dark: #2d2d2d;
      --accent-dark-rgb: 45, 45, 45;

      /* Error Color - Material Design Light */
      --error-color: #B00020;
      --error-color-rgb: 176, 0, 32;
      --on-error: #FFFFFF;

      /* Shadow Colors */
      --shadow-light: rgba(0, 0, 0, 0.08);
      --shadow-light-rgb: 0, 0, 0;
      --shadow-medium: rgba(0, 0, 0, 0.2);
      --shadow-medium-rgb: 0, 0, 0;

      /* Overlay Colors */
      --overlay-bg: rgba(0, 0, 0, 0.5);

      /* Box Shadows */
      --box-shadow: rgba(101, 119, 134, 0.2) 0px 0px 15px, rgba(101, 119, 134, 0.15) 0px 0px 3px 1px;

      /* Theme: Light (Official Number Cages Colors) */
      --cage-c0: #ffffff;
      --cage-c1: #ffffff;
      --cage-c2: #ffffff;
      --cage-c3: #ffffff;
      --cage-c4: #ffffff;
      --numbercages-selected: #ffffcc;
      /* Official Pale Yellow Selection */
  }

  /* ... (Theme Switchers omitted for brevity, match existing) ... */



  /* ===============================
   🎚 Font Size Theme Switchers
   (override base size per class)
   =============================== */
  :root.font-size-small {
      --font-size-base: var(--font-size-small);
  }

  :root.font-size-medium {
      --font-size-base: var(--font-size-medium);
  }

  :root.font-size-large {
      --font-size-base: var(--font-size-large);
  }

  /* ===============================
   🌙 Dim Theme Variables
   =============================== */
  :root.dim-theme {
      /* ===============================
       🎨 Color Variables - Dim Theme
       =============================== */
      /* Primary Colors - Deep Navy Blue */
      --primary-color: #58a6ff;
      --primary-color-rgb: 88, 166, 255;
      --primary-variant: #1f6feb;
      --primary-hover: #79c0ff;

      /* Secondary Colors - Material Design Dim */
      --secondary-color: #03DAC6;
      --secondary-color-rgb: 3, 218, 198;
      --secondary-variant: #018786;
      --secondary-hover: #02b3a5;

      /* Text Colors - Material Design Dim */
      --text-primary: #ffffff;
      --text-primary-rgb: 255, 255, 255;
      --text-secondary: #8b98a5;
      --text-secondary-rgb: 139, 152, 165;
      --text-muted: #536471;
      --text-muted-rgb: 83, 100, 113;
      --text-disabled: rgba(255, 255, 255, 0.38);
      --text-light: #ffffff;
      --text-light-rgb: 255, 255, 255;
      --text-content: #d9d9d9;
      /* Slightly off-white for content */

      /* Background Colors - Twitter Dim */
      --bg-primary: #15202b;
      --bg-primary-rgb: 21, 32, 43;
      --bg-secondary: #1e2732;
      --bg-secondary-rgb: 30, 39, 50;
      --bg-tertiary: #22303c;
      --bg-tertiary-rgb: 34, 48, 60;

      /* Surface Colors - Dim */
      --surface-color: #15202b;
      --surface-variant: #1e2732;

      /* Border Colors */
      --border-color: #242e35;
      --border-color-rgb: 56, 68, 77;
      --border-color-dark: #38444d;
      --border-color-dark-rgb: 56, 68, 77;

      /* Scrollbar Colors */
      --scrollbar-track: var(--bg-secondary);
      --scrollbar-thumb: #536471;
      --scrollbar-thumb-hover: #8b98a5;

      /* Accent Colors - Material Design Dim */
      --accent-blue: #8AB4F8;
      --accent-blue-rgb: 138, 180, 248;
      --accent-purple: #BB86FC;
      --accent-purple-rgb: 187, 134, 252;
      --accent-teal: #03DAC6;
      --accent-teal-rgb: 3, 218, 198;
      --accent-dark: #2d2d2d;
      --accent-dark-rgb: 45, 45, 45;

      /* Error Color - Material Design Dim */
      --error-color: #CF6679;
      --error-color-rgb: 207, 102, 121;
      --on-error: #000000;

      /* Shadow Colors */
      --shadow-light: rgba(0, 0, 0, 0.2);
      --shadow-light-rgb: 0, 0, 0;
      --shadow-medium: rgba(0, 0, 0, 0.4);
      --shadow-medium-rgb: 0, 0, 0;

      /* Overlay Colors */
      --overlay-bg: rgba(27, 27, 27, 0.7);

      /* Box Shadows */
      --box-shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;

      /* Theme: Dim (Number Cages Colors - Expert Palette) */
      --cage-c0: #192734;
      /* Base Dim */
      --cage-c1: #342a25;
      /* Muted Cocoa - adjusted for readability */
      --cage-c2: #1e3a4c;
      /* Deep Slate Blue */
      --cage-c3: #2b333e;
      /* Gunmetal */
      --cage-c4: #1d3632;
      /* Forest Night */
      --numbercages-selected: #255d78;
      /* Selection Accent - Brighter */
  }

  /* ===============================
   🌑 Dark Theme Variables
   =============================== */
  :root.dark-theme {

      /* ===============================
       🎨 Color Variables - Dark Theme
       =============================== */
      /* Primary Colors - Material Design */
      --primary-color: #BB86FC;
      --primary-color-rgb: 187, 134, 252;
      --primary-variant: #3700B3;
      --primary-hover: #9965f4;

      /* Secondary Colors - Material Design */
      --secondary-color: #03DAC6;
      --secondary-color-rgb: 3, 218, 198;
      --secondary-variant: #018786;
      --secondary-hover: #02c9b3;

      /* Text Colors - Material Design Emphasis */
      --text-primary: #ffffff;
      --text-primary-rgb: 255, 255, 255;
      --text-secondary: rgba(255, 255, 255, 0.60);
      --text-secondary-rgb: 255, 255, 255;
      --text-muted: rgba(255, 255, 255, 0.38);
      --text-muted-rgb: 255, 255, 255;
      --text-disabled: rgba(255, 255, 255, 0.38);
      --text-light: #000000;
      --text-light-rgb: 0, 0, 0;
      --text-content: #e0e0e0;
      /* Slightly off-white for content */

      /* Background Colors - Material Design Surface */
      --bg-primary: #000000;
      --bg-primary-rgb: 0, 0, 0;
      --bg-secondary: #121212;
      --bg-secondary-rgb: 18, 18, 18;
      --bg-tertiary: #1a1a1a;
      --bg-tertiary-rgb: 26, 26, 26;

      /* Surface Elevations - Material Design */
      --surface-00dp: #000000;
      --surface-01dp: #121212;
      --surface-02dp: #141414;
      --surface-03dp: #1a1a1a;
      --surface-04dp: #1c1c1c;
      --surface-06dp: #1f1f1f;
      --surface-08dp: #212121;
      --surface-12dp: #262626;
      --surface-16dp: #2c2c2c;
      --surface-24dp: #333333;

      /* Border Colors - Material Design */
      --border-color: #222222;
      --border-color-rgb: 26, 26, 26;
      --border-color-dark: #242424;
      --border-color-dark-rgb: 36, 36, 36;

      /* Scrollbar Colors */
      --scrollbar-track: var(--bg-secondary);
      --scrollbar-thumb: var(--border-color);
      --scrollbar-thumb-hover: var(--text-secondary);

      /* Accent Colors - Material Design */
      --accent-blue: #1D9BF0;
      --accent-blue-rgb: 29, 155, 240;
      --accent-purple: #BB86FC;
      --accent-purple-rgb: 187, 134, 252;
      --accent-teal: #03DAC6;
      --accent-teal-rgb: 3, 218, 198;
      --accent-dark: #2C2C2C;
      --accent-dark-rgb: 44, 44, 44;

      /* Error Color - Material Design */
      --error-color: #CF6679;
      --error-color-rgb: 207, 102, 121;
      --on-error: #000000;

      /* Shadow Colors */
      --shadow-light: rgba(255, 255, 255, 0.08);
      --shadow-light-rgb: 255, 255, 255;
      --shadow-medium: rgba(255, 255, 255, 0.2);
      --shadow-medium-rgb: 255, 255, 255;

      /* Overlay Colors */
      --overlay-bg: rgba(27, 27, 27, 0.7);

      /* Box Shadows */
      --box-shadow: rgba(136, 153, 166, 0.2) 0px 0px 15px, rgba(136, 153, 166, 0.15) 0px 0px 3px 1px;

      /* Theme: Dark (Number Cages Colors - Expert Palette) */
      --cage-c0: #121212;
      /* Base Dark */
      --cage-c1: #32211f;
      /* Deep Cocoa */
      --cage-c2: #0f2e47;
      /* Midnight Blue */
      --cage-c3: #1f1f23;
      /* Dark Charcoal */
      --cage-c4: #132e26;
      /* Deep Jungle */
      --numbercages-selected: #1a4a75;
      /* Selection Accent */
  }

  /* Css for page.php */
  .page-container {
      padding: 15px;
  }

  /* ===============================
   📝 Content Body Typography
   Generic styles for both flash and post content
   =============================== */

  /* Change placeholder color */
  ::placeholder {
      color: var(--text-muted);
      opacity: 1;
      /* For Firefox */
  }

  .content-body-typo {
      font-size: var(--font-size-base);
      line-height: var(--line-height-extra-relaxed);
  }

  .content-body-typo p {
      font-family: var(--fontH);
      font-size: var(--font-15);
      margin-top: 0;
      color: var(--text-primary);
  }

  .content-body-typo h1,
  .content-body-typo h2,
  .content-body-typo h3,
  .content-body-typo h4,
  .content-body-typo h5,
  .content-body-typo h6 {
      font-family: var(--fontH);
      font-weight: var(--font-weight-bold);
      margin: 0 0 15px 0;
      color: var(--text-primary);
      line-height: var(--line-height-normal);
  }

  .content-body-typo h1 {
      font-size: var(--font-28);
  }

  .content-body-typo h2 {
      font-size: var(--font-24);
  }

  .content-body-typo h3 {
      font-size: var(--font-20);
  }

  .content-body-typo h4 {
      font-size: var(--font-18);
  }

  .content-body-typo h5 {
      font-size: var(--font-16);
  }

  .content-body-typo h6 {
      font-size: var(--font-14);
  }

  .content-body-typo ul,
  .content-body-typo ol {
      margin: 15px 0;
      padding-left: 30px;
  }

  .content-body-typo ul {
      list-style-type: disc;
  }

  .content-body-typo ol {
      list-style-type: decimal;
  }

  .content-body-typo li {
      margin-bottom: 8px;
      font-size: var(--font-14);
      color: var(--text-primary);
      line-height: var(--line-height-relaxed);
  }

  .content-body-typo li:before {
      content: "•";
      color: var(--primary-color);
      display: inline-block;
      width: 1em;
      margin-left: -1em;
  }

  .content-body-typo ol li {
      counter-increment: item;
  }

  .content-body-typo ol li:before {
      content: counter(item) ".";
      color: var(--primary-color);
      font-weight: var(--font-weight-bold);
      margin-left: -1.5em;
      margin-right: 0.5em;
  }

  .content-body-typo ul ul,
  .content-body-typo ol ol,
  .content-body-typo ul ol,
  .content-body-typo ol ul {
      margin: 8px 0 8px 20px;
  }

  .content-body-typo a {
      color: var(--primary-color);
      text-decoration: underline;
      transition: all 0.2s ease;
  }

  .content-body-typo a:hover {
      color: var(--primary-hover);
      border-bottom: 1px solid var(--primary-hover);
      text-decoration: none;
  }

  .content-body-typo blockquote {
      border-left: 4px solid var(--primary-color);
      padding: 20px 25px;
      margin: 15px 0;
      font-style: italic;
      color: var(--text-primary);
      background: var(--bg-secondary);
      font-size: var(--font-14);
      position: relative;
      border-radius: 0 5px 5px 0;
  }

  .content-body-typo blockquote:before {
      content: "\201C";
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 4em;
      font-family: Georgia, serif;
      color: rgba(29, 155, 240, 0.2);
      line-height: 1;
  }

  .content-body-typo blockquote p:last-child {
      margin-bottom: 0;
  }

  .content-body-typo blockquote cite {
      display: block;
      margin-top: 15px;
      font-size: var(--font-12);
      color: var(--text-secondary);
      font-weight: var(--font-weight-medium);
      font-style: normal;
  }

  .content-body-typo blockquote cite:before {
      content: "— ";
  }

  .content-body-typo img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 20px auto;
      display: block;
  }

  .content-body-typo img:hover {
      transition: box-shadow 0.3s ease;
  }

  .content-body-typo figcaption {
      text-align: center;
      font-size: var(--font-11);
      color: var(--text-secondary);
      font-style: italic;
      margin-top: 10px;
  }

  .content-body-typo hr {
      border: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--border-color), transparent);
      margin: 30px 0;
  }

  .content-body-typo code {
      font-family: 'Courier New', monospace;
      background-color: var(--bg-secondary);
      color: var(--accent-blue);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 0.9em;
  }

  .content-body-typo pre {
      background-color: var(--bg-secondary);
      padding: 15px;
      border-radius: 8px;
      overflow-x: auto;
      margin: 20px 0;
      font-size: var(--font-11);
      line-height: var(--line-height-relaxed);
  }

  .content-body-typo pre code {
      background: none;
      padding: 0;
  }

  .content-body-typo table,
  .custom-text-editor-content table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: var(--font-14);
      table-layout: auto;
  }

  /* Specific layout for editor to handle UI overlays correctly */
  .custom-text-editor-content table {
      table-layout: fixed;
  }

  .content-body-typo table th,
  .content-body-typo table td,
  .custom-text-editor-content table th,
  .custom-text-editor-content table td {
      padding: 12px 15px;
      text-align: left;
      border: 1px solid var(--border-color);
      min-width: 150px;
      position: relative;
  }

  /* Responsive table wrapper */
  .content-body-typo .table-wrapper,
  .custom-text-editor-content .table-wrapper {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 20px 0;
  }

  @media (max-width: 768px) {
      .content-body-typo table {
          display: block;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
      }
  }

  .content-body-typo table th,
  .custom-text-editor-content table th {
      background-color: var(--bg-secondary);
      font-weight: var(--font-weight-bold);
      color: var(--text-primary);
  }


  /* ===============================
   🧩 Example Usage
   =============================== */
  /*
body {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-size-header);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

h2 {
    font-size: var(--font-size-subheader);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.caption {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
}

.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-light);
}
*/