/* ═══════════════════════════════════════════════════
   PSM COLOUR PALETTE — raw scale
   All semantic tokens reference these. Never use
   palette vars directly in components.
   ═══════════════════════════════════════════════════ */
:root {
  /* ── Red ── */
  --red-100: #2c1e1c;
  --red-200: #5c1e18;
  --red-300: #b94b3f;
  --red-400: #c97b72;
  --red-500: #f0c8c4;

  /* ── Green ── */
  --green-100: #1d2d23;
  --green-200: #1a3d28;
  --green-300: #22915a;
  --green-400: #6fcf97;
  --green-500: #b8dcc4;

  /* ── Amber ── */
  --amber-100: #272110;
  --amber-200: #3d2c0a;
  --amber-300: #b7770d;
  --amber-400: #f0c060;
  --amber-500: #e8d488;

  /* ── Blue ── */
  --blue-100: #1f3040;
  --blue-200: #16394A;
  --blue-300: #2b526c;
  --blue-400: #578eb2;
  --blue-500: #a8ccec;

  /* ── Grey / neutral ── */
  --grey-100: #0a0a0a;
  --grey-200: #151414;
  --grey-300: #1e1e1e;
  --grey-350: #171717;
  --grey-400: #232323;
  --grey-450: #00000026;

  --grey-500: #303030;
  --grey-600: #525252;
  --grey-700: #616161;
  --grey-800: #a8a8a8;
  --grey-900: #d6d6d6;

  --white-100: #ffffff;
}

/* ═══════════════════════════════════════════════════
   PSM TOKENS
   ═══════════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {
  --font-family: 'Zen Kaku Gothic Antique', system-ui, sans-serif;
  --font-size-xs:11px; --font-size-sm:12px; --font-size-base:14px;
  --font-size-md:16px; --font-size-lg:20px; --font-size-xl:24px; --font-size-2xl:32px;
  --font-weight-light:300; --font-weight-normal:400; --font-weight-medium:500; --font-weight-bold:600;
  --line-height-tight:1.3; --line-height-base:1.6;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --col-surface-base:    var(--grey-350);
  --col-surface-raised:  var(--grey-200);
  --col-surface-overlay: #222222;
  --col-surface-sunken:  var(--grey-500);
  --col-surface-hover:   #3a3a3a;

  --col-text-primary:    var(--grey-900);
  --col-text-secondary:  var(--grey-800);
  --col-text-hover:      var(--white-100);
  --col-text-dim:        var(--grey-700);
  --col-text-inverse:    var(--grey-100);
  --col-text-link:       var(--blue-400);
  --col-text-link-hover: var(--blue-500);

  --col-border-dim:    var(--grey-500);
  --col-border-base:   #222222;
  --col-border-strong: var(--grey-800);
  --col-border-focus:  var(--grey-600);

  --col-accent:       var(--blue-300);
  --col-accent-light: var(--blue-400);
  --col-accent-hover: var(--blue-400);

  /* Status — dark mode uses dark surface tints */
  --col-danger:          var(--red-300);
  --col-danger-surface:  var(--red-100);
  --col-danger-border:   var(--red-100);
  --col-danger-text:     var(--red-400);
  --col-danger-fill:     var(--red-300);

  --col-success:         var(--green-300);
  --col-success-surface: var(--green-100);
  --col-success-border:  var(--green-100);
  --col-success-text:    var(--green-400);
  --col-success-fill:    var(--green-300);

  --col-warning:         var(--amber-300);
  --col-warning-surface: var(--amber-100);
  --col-warning-border:  var(--amber-100);
  --col-warning-text:    var(--amber-400);
  --col-warning-fill:    var(--amber-300);

  --col-info:            var(--blue-300);
  --col-info-surface:    var(--blue-100);
  --col-info-border:     var(--blue-100);
  --col-info-text:       var(--blue-500);
  --col-info-fill:       var(--blue-300);

  --col-input-bg:          var(--grey-400);
  --col-input-border:      #222222;
  --col-input-text:        #d6d6d6;
  --col-input-placeholder: #616161;

  --col-btn-primary-bg:     #505151;
  --col-btn-primary-text:   #d6d6d6;
  --col-btn-default-bg:     #1a1a1a;
  --col-btn-default-text:   #a8a8a8;
  --col-btn-default-border: #616161;

  --border-radius-sm:2px; --border-radius-base:3px; --border-radius-md:6px;
  --border-radius-lg:10px; --border-radius-pill:5px;
  --border-radius-xl: 20px;

  --shadow-sm:0 1px 3px rgba(0,0,0,.5); --shadow-base:0 2px 8px rgba(0,0,0,.6); --shadow-lg:0 4px 20px rgba(0,0,0,.8);
  --transition-fast:100ms ease; --transition-base:180ms ease; --transition-slow:300ms ease;
  --z-dropdown:100; --z-sticky:200; --z-modal:300; --z-toast:400; --z-tooltip:500;

  --sty-controls-border:         1px solid var(--col-input-border);
  --sty-controls-border-radius:  3px;
  --sty-controls-border-buttons: 1px solid var(--col-btn-default-border);

  --col-white-100: rgba(255,255,255,0.06);
  --col-white-200: rgba(255,255,255,0.12);
  --col-white-300: rgba(255,255,255,0.20);
  --col-white-400: rgba(180,180,180,0.60);
  --col-white-500: rgba(180,180,180,1.00);

  --line-dim:     1px solid var(--col-white-100);
  --line-base:    1px solid var(--col-white-200);
  --line-strong:  1px solid var(--col-white-300);
  --line-section: 1px solid var(--col-white-400);
  --sty-line-dim:     var(--line-base);
  --sty-line-section: var(--line-strong);

  --layout-header-height: 100px;
  --layout-footer-height: 48px;
  --layout-max-width:     1400px;
  --layout-sidebar-width: 220px;
  --menu-closed-width:    56px;
  --layout-content-pad:   20px;
  --padding-menu-item:    11px;

  --control-height:           40px;
  --control-height-small:     22px;
  --control-height-input:     var(--control-height);
  --control-height-btn:       var(--control-height);
  --control-height-row:       var(--control-height);
  --control-height-menu-item: var(--control-height);

  --control-width-btn:           90px;
  --control-width-btn-small:     80px;
  --control-width-btn-medium:    90px;
  --control-width-btn-large:     120px;
  --control-gap:                 20px;

  /* ── Check circle (reusable checkbox custom element) ──
     Implemented in `static/admin/scripts/components/checkbox.js`
     Note: animation speed is numeric ms (not `180ms ease`). */
  --psm-check-circle-size-sml: 14px;
  --psm-check-circle-size-md:  18px;
  --psm-check-circle-size-lg:  22px;
  --psm-check-circle-size-xl:  28px;
  --psm-check-circle-size-base: var(--psm-check-circle-size-md);
  --psm-check-circle-size-autio: auto;

  --psm-check-circle-stroke-width: 5;
  --psm-check-circle-border-radius: 50;
  --psm-check-circle-animation-speed: 180;

  /* lists */

  --list-selected: var(--grey-400);

  --blue-a:#407b88; --blue-b:#20353a9d; --transparency-a:#1f6c7d00;
  --dark-blue-c:#336069; --dark-blue-d:#2a3c4100; --transparency-b:#0a334000;

  --icon-info:'info'; --icon-success:'check_circle'; --icon-warning:'warning'; --icon-danger:'error';
  --toast-color-info:var(--col-info-text); --toast-color-success:var(--col-success-text);
  --toast-color-warning:var(--col-warning-text); --toast-color-danger:var(--col-danger-text);

  /*table styling */
  --col-table-header-bg: var(--grey-400);

  /* Media / source file type badges (admin) — British spelling per design tokens */
  --filetype-unknown-colour-primary: var(--grey-800);
  --filetype-video-colour-primary: var(--blue-400);
  --filetype-image-colour-primary: var(--green-400);
  --filetype-ndi-colour-primary: #c4a5f7;
  --filetype-custom-colour-primary: var(--amber-400);
  --filetype-web-colour-primary: var(--blue-300);
  --filetype-widget-colour-primary: var(--blue-500);
  --filetype-clock-colour-primary: var(--grey-900);
  --filetype-api-feed-colour-primary: var(--green-300);
  --filetype-live-stream-colour-primary: var(--red-400);
  --filetype-overlay-colour-primary: var(--amber-300);
  --filetype-news-ticker-colour-primary: var(--amber-400);
}

:root[data-theme="light"] {
  --col-surface-base:    #f0f0ee;
  --col-surface-raised:  var(--grey-200);
  --col-surface-overlay: #e0e0de;
  --col-surface-sunken:  #d8d8d6;
  --col-surface-hover:   #d0d0ce;

  --col-text-primary:    #242424;
  --col-text-secondary:  #444444;
  --col-text-dim:        #888888;
  --col-text-inverse:    var(--grey-900);
  --col-text-link:       var(--blue-300);
  --col-text-link-hover: var(--blue-200);

  --col-border-dim:    #d0d0ce;
  --col-border-base:   #c0c0be;
  --col-border-strong: #888888;
  --col-border-focus:  var(--grey-600);

  --col-accent:       var(--blue-300);
  --col-accent-light: var(--blue-500);
  --col-accent-hover: var(--blue-200);

  /* Status — light mode uses the lighter end of the palette */
  --col-danger-surface:  var(--red-500);
  --col-danger-border:   var(--red-500);
  --col-danger-text:     var(--red-200);
  --col-danger-fill:     var(--red-300);

  --col-success-surface: var(--green-500);
  --col-success-border:  var(--green-500);
  --col-success-text:    var(--green-200);
  --col-success-fill:    var(--green-300);

  --col-warning-surface: var(--amber-500);
  --col-warning-border:  var(--amber-500);
  --col-warning-text:    var(--amber-200);
  --col-warning-fill:    var(--amber-300);

  --col-info-surface:    var(--blue-500);
  --col-info-border:     var(--blue-500);
  --col-info-text:       var(--blue-200);
  --col-info-fill:       var(--blue-300);

  --col-input-bg:          #ffffff;
  --col-input-border:      #c0c0be;
  --col-input-text:        #242424;
  --col-input-placeholder: #999999;

  --col-btn-primary-bg:     #505151;
  --col-btn-primary-text:   #ffffff;
  --col-btn-default-bg:     #e8e8e6;
  --col-btn-default-text:   #444444;
  --col-btn-default-border: #c0c0be;

  --shadow-sm:0 1px 3px rgba(0,0,0,.10); --shadow-base:0 2px 8px rgba(0,0,0,.13); --shadow-lg:0 4px 20px rgba(0,0,0,.18);
  --sty-controls-border:1px solid var(--col-input-border);
  --sty-line-dim:1px solid var(--col-border-dim);
  --sty-line-section:1px solid var(--col-border-strong);

  --col-white-100: rgba(0,0,0,0.06);
  --col-white-200: rgba(0,0,0,0.10);
  --col-white-300: rgba(0,0,0,0.16);
  --col-white-400: rgba(0,0,0,0.35);
  --col-white-500: rgba(0,0,0,0.60);

  --line-dim:     1px solid var(--col-white-100);
  --line-base:    1px solid var(--col-white-200);
  --line-strong:  1px solid var(--col-white-300);
  --line-section: 1px solid var(--col-white-400);
  --sty-line-dim:     var(--line-base);
  --sty-line-section: var(--line-strong);

  /*table styling */
  --col-table-header-bg: var(--grey-400);

  --filetype-unknown-colour-primary: var(--grey-600);
  --filetype-video-colour-primary: var(--blue-200);
  --filetype-image-colour-primary: var(--green-200);
  --filetype-ndi-colour-primary: #6d28d9;
  --filetype-custom-colour-primary: var(--amber-200);
  --filetype-web-colour-primary: var(--blue-300);
  --filetype-widget-colour-primary: var(--blue-200);
  --filetype-clock-colour-primary: var(--grey-600);
  --filetype-api-feed-colour-primary: var(--green-200);
  --filetype-live-stream-colour-primary: var(--red-200);
  --filetype-overlay-colour-primary: var(--amber-200);
  --filetype-news-ticker-colour-primary: var(--amber-200);
}



/* ═══════════════════════════════════════════════════
   FONT SIZES
   ═══════════════════════════════════════════════════ */
   :root {
    --font-size-xs:11px;
    --font-size-sm:15px;
    --font-size-base:15px;
    --font-size-md:16px;
    --font-size-lg:20px;
    --font-size-xl:24px;
    --font-size-2xl:32px;
  }
  
  /* ═══════════════════════════════════════════════════
     CONTROL SIZES
     ═══════════════════════════════════════════════════ */
  
     :root {
      /* Base Font Sizes (Ensure these exist) */
      --font-size-xs: 12px;
      --font-size-sm: 14px;
      --font-size-md: 16px;
    
      /* Button Dimensions */
      --btn-height-sm: 22px;  --btn-width-sm: 80px;
      --btn-height-md: 40px;  --btn-width-md: 100px;
      --btn-height-lg: 48px;  --btn-width-lg: 120px;
    
      /* Button Font Mappings */
      --btn-font-size-sm: var(--font-size-xs);  
      --btn-font-size-md: var(--font-size-sm);
      --btn-font-size-lg: var(--font-size-md);

      /* Table Dimensions */
      --control-table-row-height: 50px;
      --control-table-row-height-small: 28px;
      --control-table-row-height-medium: 40px;
      --control-table-row-height-large: 80px;


    }


   /* ==================================================
      SETTINGS PAGES
     ==================================================  */

    :root {
      --settings-max-width: 900px;
    }