/* ═══════════════════════════════════════════════════════════════
   token.css – Dynamic Brand/Tokens
   ═══════════════════════════════════════════════════════════════ */

/* Common tokens */
:root {

  /* Typography */
  
  --font-sans: 'Poppins', 'Segoe UI', sans-serif;
  
  --font-size-xs: 0.7rem;
  
  --font-size-sm: 0.75rem;
  
  --font-size-base: 0.875rem;
  
  --font-size-md: 1rem;
  
  --font-size-lg: 1.1rem;
  
  --font-size-xl: 1.5rem;
  
  --font-size-2xl: 1.875rem;
  
  --font-weight-normal: 400;
  
  --font-weight-semibold: 600;
  
  --font-weight-bold: 700;
  

  /* Voucher & general-purpose */
  
  --new-color-white: #ffffff;
  
  --new-overlay-scrim: rgba(0, 0, 0, 0.45);
  
  --new-on-accent-overlay-20: color-mix(in srgb, var(--new-color-white) 20%, transparent);
  
  --new-divider-white-10: color-mix(in srgb, var(--new-color-white) 10%, transparent);
  
  --new-logo-shadow-soft: rgba(0, 0, 0, 0.2);
  
  --new-logo-shadow-strong: rgba(0, 0, 0, 0.3);
  
  --new-shadow-ink: #000000;
  
  --new-voucher-bg: #ffffff;
  
  --new-voucher-accent: #063932;
  
  --new-voucher-accent-light: color-mix(in srgb, #063932 100%, white 38%);
  
  --new-voucher-accent-deep: color-mix(in srgb, #063932 100%, black 25%);
  
  --new-voucher-text-meta: #333333;
  
  --new-voucher-text-code: #222222;
  
  --new-voucher-text-faint: #bbbbbb;
  
  --new-voucher-text-faint-2: #cccccc;
  
  --new-voucher-text-faint-3: #aaaaaa;
  
  --new-voucher-border-tint: color-mix(in srgb, #063932 15%, white);
  
  --new-voucher-border-tint-2: color-mix(in srgb, #063932 10%, white);
  
  --new-voucher-surface-tint: color-mix(in srgb, #063932 4%, white);
  
  --new-voucher-surface-tint-2: color-mix(in srgb, #063932 6%, white);
  
  --new-voucher-code-bg: color-mix(in srgb, #063932 3%, white);
  
  --new-voucher-print-border: #dddddd;
  

}

/* Dark mode */
:root,
[data-theme="dark"] {

  /* Dark backgrounds */
  
  --bg-base: #121212;
  
  --bg-surface: #1A1A1A;
  
  --bg-sidebar: #0A0A0A;
  
  --bg-input: #1A1A1A;
  
  --bg-overlay: rgba(10,10,10,0.98);
  
  --bg-topbar: rgba(10,10,10,0.97);
  
  --bg-footer: rgba(10,10,10,0.9);
  
  --bg-bottom-nav: rgba(10,10,10,0.97);
  
  --bg-gradient: linear-gradient(135deg, #0A0A0A 0%, #121212 50%, #1A1A1A 100%);
  

  /* Dark accents */
  
  --accent-primary: #063932;
  
  --accent-hover: color-mix(in srgb, #063932 85%, black);
  
  --accent-secondary: color-mix(in srgb, #063932 100%, white 38%);
  
  --accent-tertiary: color-mix(in srgb, #063932 100%, white 62%);
  
  --accent-muted: color-mix(in srgb, #063932 24%, transparent);
  

  /* Dark text & borders */
  
  --text-primary: #FFFFFF;
  
  --text-secondary: #F8FAFC;
  
  --text-muted: rgba(255,255,255,0.68);
  
  --text-accent: color-mix(in srgb, #063932 100%, white 62%);
  
  --text-link: color-mix(in srgb, #063932 100%, white 62%);
  
  --text-orange: color-mix(in srgb, #063932 100%, white 62%);
  
  --text-blue: #93C5FD;
  
  --border: rgba(255,255,255,0.18);
  
  --border-strong: rgba(255,255,255,0.28);
  
  --border-accent: color-mix(in srgb, color-mix(in srgb, #063932 100%, white 38%) 55%, transparent);
  
  --shadow-card: 0 6px 24px rgba(0,0,0,0.28);
  
  --shadow-accent: 0 8px 20px color-mix(in srgb, #063932 32%, transparent);
  

  /* Dark scrollbar & navigation */
  
  --scrollbar-track: rgba(255,255,255,0.08);
  
  --scrollbar-thumb: color-mix(in srgb, color-mix(in srgb, #063932 100%, white 38%) 55%, transparent);
  
  --scrollbar-hover: color-mix(in srgb, color-mix(in srgb, #063932 100%, white 38%) 80%, transparent);
  
  --nav-trigger-bg: color-mix(in srgb, color-mix(in srgb, #063932 100%, white 38%) 14%, transparent);
  
  --nav-trigger-border: color-mix(in srgb, color-mix(in srgb, #063932 100%, white 38%) 38%, transparent);
  
  --nav-trigger-text: #FFFFFF;
  
  --nav-trigger-hover: color-mix(in srgb, color-mix(in srgb, #063932 100%, white 38%) 24%, transparent);
  
  --nav-dropdown-bg: #0A0A0A;
  
  --nav-link-text: rgba(255,255,255,0.84);
  
  --nav-link-hover-text: color-mix(in srgb, #063932 100%, white 62%);
  
  --nav-section-text: color-mix(in srgb, #063932 100%, white 62%);
  
  --bottom-nav-item: rgba(255,255,255,0.8);
  

  /* Dark status colours */
  
  --status-success-bg: rgba(16,185,129,0.15);
  
  --status-success-text: #6ee7b7;
  
  --status-success-border: rgba(16,185,129,0.35);
  
  --status-error-bg: rgba(220,38,38,0.15);
  
  --status-error-text: #fca5a5;
  
  --status-error-border: rgba(220,38,38,0.35);
  
  --status-warn-bg: rgba(245,158,11,0.15);
  
  --status-warn-text: #fcd34d;
  
  --status-warn-border: rgba(245,158,11,0.35);
  

}

/* Light mode */
[data-theme="light"] {

  /* Light backgrounds */
  
  --bg-base: #FFFFFF;
  
  --bg-surface: #FFFFFF;
  
  --bg-sidebar: #F7F9F8;
  
  --bg-input: #FFFFFF;
  
  --bg-overlay: rgba(255,255,255,0.99);
  
  --bg-topbar: rgba(255,255,255,0.97);
  
  --bg-footer: rgba(255,255,255,0.95);
  
  --bg-bottom-nav: rgba(255,255,255,0.97);
  
  --bg-gradient: linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, #063932 6%, white) 55%, #FFFFFF 100%);
  

  /* Light accents */
  
  --accent-primary: #063932;
  
  --accent-hover: color-mix(in srgb, #063932 100%, black 15%);
  
  --accent-secondary: color-mix(in srgb, #063932 100%, white 38%);
  
  --accent-tertiary: color-mix(in srgb, #063932 100%, white 62%);
  
  --accent-muted: color-mix(in srgb, #063932 10%, transparent);
  

  /* Light text & borders */
  
  --text-primary: #000000;
  
  --text-secondary: #111111;
  
  --text-muted: rgba(0,0,0,0.6);
  
  --text-accent: #063932;
  
  --text-link: color-mix(in srgb, #063932 100%, black 15%);
  
  --text-orange: color-mix(in srgb, #063932 100%, black 15%);
  
  --text-blue: #1D4ED8;
  
  --border: rgba(0,0,0,0.14);
  
  --border-strong: rgba(0,0,0,0.26);
  
  --border-accent: color-mix(in srgb, #063932 45%, transparent);
  
  --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
  
  --shadow-accent: 0 4px 16px color-mix(in srgb, #063932 20%, transparent);
  

  /* Light scrollbar & navigation */
  
  --scrollbar-track: rgba(0,0,0,0.06);
  
  --scrollbar-thumb: color-mix(in srgb, #063932 45%, transparent);
  
  --scrollbar-hover: color-mix(in srgb, #063932 75%, transparent);
  
  --nav-trigger-bg: color-mix(in srgb, #063932 8%, transparent);
  
  --nav-trigger-border: rgba(0,0,0,0.16);
  
  --nav-trigger-text: #000000;
  
  --nav-trigger-hover: color-mix(in srgb, #063932 14%, transparent);
  
  --nav-dropdown-bg: #FFFFFF;
  
  --nav-link-text: rgba(0,0,0,0.78);
  
  --nav-link-hover-text: color-mix(in srgb, #063932 100%, black 15%);
  
  --nav-section-text: #063932;
  
  --bottom-nav-item: rgba(0,0,0,0.72);
  

  /* Light status colours */
  
  --status-success-bg: #f0fdf4;
  
  --status-success-text: #166534;
  
  --status-success-border: rgba(22,163,74,0.40);
  
  --status-error-bg: #fef2f2;
  
  --status-error-text: #991b1b;
  
  --status-error-border: rgba(220,38,38,0.35);
  
  --status-warn-bg: #fffbeb;
  
  --status-warn-text: #92400e;
  
  --status-warn-border: rgba(245,158,11,0.40);
  

}

/* Brand Logo Token */
:root,
[data-theme="dark"] {
  --brand-logo-url: url("/media/brand/TME_White-645a6aefcbf84b52bb415d79680e790f.png");
}
[data-theme="light"] {
  --brand-logo-url: url("/media/brand/TME_Black-304c437350aa4676ba141885799acc22.png");
}

/* ── Basic Controls (form elements, scrollbar) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
select option { background-color: var(--bg-input); color: var(--text-primary); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* global transitions */
*, *::before, *::after {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.18s ease,
    box-shadow 0.25s ease;
}