/* =========================================================
MEGA RIDE DS v1 "Onyx · Gold · Crimson" — DESIGN TOKENS
Mega Ride (by Mega Tickets USA). Near-black onyx + brushed gold
+ a crimson signature accent (the red bar in the M mark).
Light mode: ivory page + onyx ink. Dark mode: onyx + gold-fill.

Loaded first by every stylesheet (auth-styles.css,
dispatch-styles.css). Change tokens HERE to re-theme all
surfaces at once. Rebranding for a new company = edit the
values in :root and [data-theme="dark"] below.
========================================================= */

/* ── Light — day luxury (DEFAULT) ── */
:root {
  /* Surfaces */
  --surface-page:     #F5F1E8;                 /* ivory — Four Seasons stationery */
  --surface-card:     #FFFFFF;
  --surface-elevated: #FDFAF2;
  --surface-overlay:  rgba(245,241,232,0.92);

  /* Text — Personnalité royal navy ink */
  --text-primary:   #0B0D17;
  --text-secondary: rgba(11,13,23,0.72);
  /* 0.50 dava 3.54:1 sobre a página ivory e 3.63:1 sobre cartão branco —
     abaixo do piso de leitura de 4.5:1, e isto é a cor de TODO texto
     secundário do console (rótulo de KPI, cabeçalho de tabela, subtítulo de
     painel, rótulo de grupo da sidebar). 0.60 põe os dois acima de 4.7:1.
        node dispatch/scripts/audit-contrast.js */
  --text-muted:     rgba(11,13,23,0.60);
  --text-on-gold:   #05060C;
  --text-on-dark:   #F5F1E8;
  --text-on-light:  #05060C;

  /* Borders */
  --border-default: rgba(11,13,23,0.16);
  --border-subtle:  rgba(11,13,23,0.08);
  --border-strong:  rgba(11,13,23,0.26);
  --border-focus:   #D4A94E;                   /* Personnalité gold focus */

  /* Accent — Mega Ride gold (≤3% of any view on light) */
  --accent-gold:       #D4A94E;
  --accent-gold-deep:  #A8822F;
  --accent-gold-light: #E8C66A;
  --accent-gold-glow:  rgba(212,169,78,0.20);

  /* ── OURO PARA TEXTO ──────────────────────────────────────────────────
     Ouro claro sobre fundo claro não é uma questão de gosto: #D4A94E sobre
     ivory dá 2.19:1, e 2.19:1 é texto que sai da tela. Foi medido em
     "Dispatch" na sidebar, nos kickers, nos títulos de seção e nos chips
     ativos — tudo que a marca usa para dar ênfase, ilegível justamente no
     tema em que a ênfase mais importa.

     Separar o token em vez de escurecer --accent-gold: aquele é o ouro de
     PREENCHIMENTO (botão .btn-gold, filete do topo do KPI, borda de foco),
     e escurecê-lo apagaria a marca e ainda quebraria o texto quase-preto
     que fica POR CIMA dele. São dois papéis, e agora são dois tokens.

     No escuro os dois são a mesma cor — sobre onyx o ouro tem 7.5:1 e não
     precisa de correção nenhuma. */
  --accent-gold-ink:   #7A5C16;

  /* Accent — Mega Ride crimson (signature; live / urgent / brand) */
  --accent-crimson:      #C8102E;
  --accent-crimson-deep: #9E0C24;
  --accent-crimson-glow: rgba(200,16,46,0.18);

  /* Accent — onyx (key names kept as navy* for back-compat) */
  --navy-default: #0B0D17;
  --navy-deep:    #05060C;
  --navy-light:   #262A3A;
  --navy-glow:    rgba(11,13,23,0.18);

  /* Actions (light: primary is royal navy fill) */
  --action-primary-bg:        #0B0D17;
  --action-primary-text:      #F5F1E8;
  --action-primary-press:     #05060C;
  --action-secondary-bg:      transparent;
  --action-secondary-text:    #0B0D17;
  --action-secondary-border:  rgba(11,13,23,0.26);
  --action-destructive-bg:    #A25149;
  --action-destructive-text:  #F5F1E8;

  /* Status (muted, hospitality-tuned — kept from V3)

     ⚠️ Estes quatro são usados como COR DE TEXTO nas pilhas de status, nos
     rótulos "Live System · Synced", nos deltas dos KPIs. Os tons originais
     (#5E8E60, #B8894A, #A25149, #5E7E9A) foram escolhidos como cores de
     acento e ficavam entre 3.2 e 3.7:1 sobre ivory — bonitos e abaixo do
     piso de leitura. Escurecidos o suficiente para 4.5:1 mantendo a matiz;
     no escuro continuam claros, que é onde a escala inverte. */
  --status-success: #3F7042;
  --status-warning: #8A5F1C;
  --status-error:   #8E3A32;
  --status-info:    #3F5F7C;

  /* Radius (Rolex-precise) */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Typography */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Shadows (navy-alpha, paper-soft — NEVER neon/glow) */
  --shadow-sm:   0 1px 2px   rgba(11,13,23,0.04);
  --shadow-md:   0 4px 16px  rgba(11,13,23,0.08);
  --shadow-lg:   0 16px 60px rgba(11,13,23,0.12);
  --shadow-gold: 0 8px 20px  rgba(212,169,78,0.18);

  /* Spacing (4px grid) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Motion */
  --dur-fast:   120ms;
  --dur-normal: 240ms;
  --dur-slow:   400ms;
  --ease-std:   cubic-bezier(0.2, 0, 0.2, 1);
  --ease-dec:   cubic-bezier(0, 0, 0.2, 1);

  /* Tier colors (for VIP badges) */
  --tier-silver:   #A8A8A8;
  --tier-gold:     #D4A94E;
  --tier-platinum: #B4A9F0;
  --tier-elite:    #5DCAA5;
}

/* ── Dark — Personnalité signature (royal navy gradient + gold-fill primary)
   Used on hero-always-dark contexts (auth pages, any page that wants
   the cinematic Personnalité look) or when the user flips dispatch
   theme toggle. Apply via `<body data-theme="dark">` or `<html data-theme="dark">`. ── */
[data-theme="dark"],
body.dark,
.theme-dark {
  /* Mid-deep navy — Personnalité royal #0B0D17 kept as ACCENT only.
     Page surfaces desaturated so the bright royal blue doesn't dominate. */
  --surface-page:         #0B0D17;            /* mid-deep navy — controlled */
  --surface-card:         #10121C;            /* slightly lifted, navy + charcoal */
  --surface-elevated:     #161824;            /* modals / hover */
  --surface-overlay:      rgba(7,8,15,0.92);
  --surface-gradient-end: #040509;            /* almost-black navy — drama terminus */

  --text-primary:   #F5F1E8;
  --text-secondary: rgba(245,241,232,0.70);
  /* 0.45 dava 4.11:1 sobre --surface-elevated e 4.14:1 sobre --surface-card:
     abaixo do piso de 4.5:1, e num tom que parece "elegante" numa captura de
     tela e some num laptop com reflexo. 0.52 leva os dois para ~5:1 sem
     perder a hierarquia contra --text-secondary (0.70). */
  --text-muted:     rgba(245,241,232,0.52);
  --text-on-gold:   #05060C;
  --text-on-dark:   #F5F1E8;
  --text-on-light:  #05060C;

  --border-default: rgba(245,241,232,0.12);
  --border-subtle:  rgba(245,241,232,0.06);
  --border-strong:  rgba(245,241,232,0.22);
  --border-focus:   #D4A94E;

  --accent-gold:       #D4A94E;
  --accent-gold-deep:  #A8822F;
  --accent-gold-light: #E8C66A;
  --accent-gold-glow:  rgba(212,169,78,0.22);
  /* No escuro o ouro já tem 7.5:1 contra o onyx — texto e preenchimento são
     a mesma cor, e é assim que a marca deve aparecer. */
  --accent-gold-ink:   #D4A94E;

  --accent-crimson:      #E0223E;
  --accent-crimson-deep: #C8102E;
  --accent-crimson-glow: rgba(224,34,62,0.28);

  --navy-default: #0B0D17;
  --navy-deep:    #05060C;
  --navy-light:   #262A3A;
  --navy-glow:    rgba(11,13,23,0.40);

  /* Actions (dark: primary is GOLD-fill — Personnalité signature) */
  --action-primary-bg:        #D4A94E;
  --action-primary-text:      #05060C;
  --action-primary-press:     #A8822F;
  --action-secondary-bg:      transparent;
  --action-secondary-text:    #F5F1E8;
  --action-secondary-border:  rgba(245,241,232,0.22);
  --action-destructive-bg:    #A25149;
  --action-destructive-text:  #F5F1E8;

  --status-success: #7BAE7F;
  --status-warning: #D4A76A;
  --status-error:   #C46B5F;
  --status-info:    #8AA7C7;

  --shadow-sm:   0 1px 2px   rgba(0,0,0,0.25);
  --shadow-md:   0 4px 16px  rgba(0,0,0,0.40);
  --shadow-lg:   0 16px 60px rgba(0,0,0,0.55);
  --shadow-gold: 0 8px 20px  rgba(212,169,78,0.22);
}