/* ═══════════════════════════════════════════════════════════════
   token.css – Design Tokens & Basic Controls
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography Scale ── */
:root {
  --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;
}

/* ── Colours (Dark Mode default) ── */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-base:        #1F2933;
  --bg-surface:     #273444;
  --bg-sidebar:     #111827;
  --bg-input:       #273444;
  --bg-overlay:     rgba(17,24,39,0.98);
  --bg-topbar:      rgba(17,24,39,0.97);
  --bg-footer:      rgba(17,24,39,0.9);
  --bg-bottom-nav:  rgba(17,24,39,0.97);
  --bg-gradient:    linear-gradient(135deg, #111827 0%, #1F2933 50%, #273444 100%);

  /* Accent */
  --accent-primary:    #F97316;
  --accent-hover:      #EA580C;
  --accent-secondary:  #FB923C;
  --accent-tertiary:   #FDBA74;
  --accent-muted:      rgba(249,115,22,0.16);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: #F8FAFC;
  --text-muted:     rgba(255,255,255,0.68);
  --text-accent:    #F97316;
  --text-link:      #FDBA74;
  --text-orange:    #FDBA74;
  --text-blue:      #93C5FD;

  /* Borders */
  --border:         rgba(255,255,255,0.18);
  --border-strong:  rgba(255,255,255,0.28);
  --border-accent:  rgba(249,115,22,0.55);

  /* Shadows */
  --shadow-card:    0 6px 24px rgba(0,0,0,0.28);
  --shadow-accent:  0 8px 20px rgba(249,115,22,0.24);

  /* Scrollbar */
  --scrollbar-track: rgba(255,255,255,0.08);
  --scrollbar-thumb: rgba(249,115,22,0.55);
  --scrollbar-hover: rgba(249,115,22,0.8);

  /* 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);

  /* Nav */
  --nav-trigger-bg:      rgba(249,115,22,0.1);
  --nav-trigger-border:  rgba(249,115,22,0.32);
  --nav-trigger-text:    #FFFFFF;
  --nav-trigger-hover:   rgba(249,115,22,0.2);
  --nav-dropdown-bg:     #111827;
  --nav-link-text:       rgba(255,255,255,0.84);
  --nav-link-hover-text: #FDBA74;
  --nav-section-text:    #FDBA74;
  --bottom-nav-item:     rgba(255,255,255,0.8);
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg-base:        #FFFFFF;
  --bg-surface:     #FFFFFF;
  --bg-sidebar:     #F8FAFC;
  --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%, #FFF7ED 55%, #FFFFFF 100%);

  --accent-primary:    #F97316;
  --accent-hover:      #EA580C;
  --accent-secondary:  #FB923C;
  --accent-tertiary:   #FDBA74;
  --accent-muted:      rgba(249,115,22,0.1);

  --text-primary:   #000000;
  --text-secondary: #111827;
  --text-muted:     rgba(0,0,0,0.6);
  --text-accent:    #F97316;
  --text-link:      #C2410C;
  --text-orange:    #C2410C;
  --text-blue:      #1D4ED8;

  --border:         rgba(0,0,0,0.14);
  --border-strong:  rgba(0,0,0,0.26);
  --border-accent:  rgba(249,115,22,0.45);

  --shadow-card:    0 2px 16px rgba(0,0,0,0.08);
  --shadow-accent:  0 4px 16px rgba(249,115,22,0.2);

  --scrollbar-track: rgba(0,0,0,0.06);
  --scrollbar-thumb: rgba(249,115,22,0.45);
  --scrollbar-hover: rgba(249,115,22,0.75);

  --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);

  --nav-trigger-bg:      rgba(249,115,22,0.08);
  --nav-trigger-border:  rgba(0,0,0,0.16);
  --nav-trigger-text:    #000000;
  --nav-trigger-hover:   rgba(249,115,22,0.14);
  --nav-dropdown-bg:     #FFFFFF;
  --nav-link-text:       rgba(0,0,0,0.78);
  --nav-link-hover-text: #EA580C;
  --nav-section-text:    #C2410C;
  --bottom-nav-item:     rgba(0,0,0,0.72);
}

/* ── 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;
}

:root {
  /* 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;

  /* Voucher print component */
  --new-voucher-bg: #ffffff;
  --new-voucher-accent: #E8579A;
  --new-voucher-accent-light: #F87BAC;
  --new-voucher-accent-deep: #b5406b;
  --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: #e8d0df;
  --new-voucher-border-tint-2: #f0d8e8;
  --new-voucher-surface-tint: #fdf5fa;
  --new-voucher-surface-tint-2: #fff0f6;
  --new-voucher-code-bg: #f9f4f7;
  --new-voucher-print-border: #dddddd;
}

/* ═══════════════════════════════════════════════════════════════
   Brand Logo Token
   ═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --brand-logo-url: url("/static/brand/vula_logo_w.png");
}
[data-theme="light"] {
  --brand-logo-url: url("/static/brand/vula_logo_b.png");
}