/**
 * TrensMapSP - Design Tokens (v2 — redesign: glass, cantos grandes, claro/escuro)
 * 
 * Contrato de design visual, cores oficiais da malha metroferroviária de São Paulo,
 * tokens de superfície, tipografia, estados do mapa SVG e acessibilidade WCAG AA.
 */

:root {
  /* ========================================================================
     1. CORES OFICIAIS DAS LINHAS (Metrô, CPTM, Concessionárias)
     Fonte: path2010.svg e manual de identidade visual
     ======================================================================== */

  /* Metrô de São Paulo */
  --color-line-l1: #0053a0;       /* L1 - Azul */
  --color-line-l1-text: #ffffff;  /* Contraste: 7.65:1 (AAA) */

  --color-line-l2: #008062;       /* L2 - Verde */
  --color-line-l2-text: #ffffff;  /* Contraste: 4.92:1 (AA) */

  --color-line-l3: #ef4135;       /* L3 - Vermelha */
  --color-line-l3-text: #ffffff;  /* Contraste: 3.83:1 (AA p/ texto grande/bold) */
  --color-line-l3-text-dark: #18181b; /* Contraste: 4.62:1 (AA) */

  --color-line-l4: #ffd500;       /* L4 - Amarela (ViaQuatro) */
  --color-line-l4-text: #18181b;  /* Contraste: 12.46:1 (AAA) - NUNCA branco */

  --color-line-l5: #784e9f;       /* L5 - Lilás (ViaMobilidade) */
  --color-line-l5-text: #ffffff;  /* Contraste: 6.20:1 (AAA) */

  --color-line-l15: #848c90;      /* L15 - Prata (Monotrilho) */
  --color-line-l15-text: #18181b; /* Contraste: 5.18:1 (AA) */

  /* CPTM e Concessionárias (Linhas 7 a 13) */
  --color-line-l7: #a01866;       /* L7 - Rubi (TIC Trens) */
  --color-line-l7-text: #ffffff;  /* Contraste: 7.45:1 (AAA) */

  --color-line-l8: #9e9e95;       /* L8 - Diamante (ViaMobilidade) */
  --color-line-l8-text: #18181b;  /* Contraste: 6.56:1 (AAA) - NUNCA branco */

  --color-line-l9: #00a88e;       /* L9 - Esmeralda (ViaMobilidade) */
  --color-line-l9-text: #18181b;  /* Contraste: 5.90:1 (AA) */

  --color-line-l10: #007c8f;      /* L10 - Turquesa (CPTM) */
  --color-line-l10-text: #ffffff; /* Contraste: 4.91:1 (AA) */

  --color-line-l11: #f04e22;      /* L11 - Coral (CPTM) */
  --color-line-l11-text: #ffffff; /* Contraste: 3.61:1 (AA p/ texto grande/bold) */
  --color-line-l11-text-dark: #18181b; /* Contraste: 4.91:1 (AA) */

  --color-line-l12: #013f88;      /* L12 - Safira (CPTM) */
  --color-line-l12-text: #ffffff; /* Contraste: 10.16:1 (AAA) */

  --color-line-l13: #00ac5b;      /* L13 - Jade (CPTM) */
  --color-line-l13-text: #18181b; /* Contraste: 5.95:1 (AA) */

  /* Linhas complementares do mapa esquemático */
  --color-line-l6: #f37422;       /* L6 - Laranja (Linha Uni) */
  --color-line-l6-text: #18181b;  /* Contraste: 6.19:1 (AA) */

  --color-line-l17: #917f57;      /* L17 - Ouro (Monotrilho) */
  --color-line-l17-text: #ffffff; /* Contraste: 3.91:1 (AA p/ bold) */

  --color-line-exp: #000000;      /* Airport Express */
  --color-line-exp-text: #ffffff;

  --color-line-artesp: #0053a0;   /* Corredores ARTESP A/B/C */
  --color-line-artesp-text: #ffffff;

  --color-line-walk: #71717a;     /* Transferência a pé */
  --color-line-walk-text: #ffffff;

  /* ========================================================================
     2. MAPA (dim / overlay) — dimmed em tons que funcionam claro e escuro
     ======================================================================== */
  --map-dimmed-line: #cfd3da;
  --map-dimmed-ring: #cfd3da;
  --map-dimmed-dot: #ffffff;
  --map-dimmed-label-opacity: 0.42;
  --map-dimmed-deco-opacity: 0.25;
  --map-bg: #f3f5fa;
  --map-bg-2: #e9edf6;
  --route-stroke-width: 1.8px;
  /* camada de status */
  --st-ok: #16a34a;
  --st-ok-ring: #15803d;
  --st-slow: #f5b400;
  --st-slow-ink: #3b2f00;
  --st-stop: #e11d48;

  /* ========================================================================
     3. SUPERFÍCIES (claro) — glass leve + neutros
     ======================================================================== */
  --color-bg-base: #f3f5fa;
  --color-bg-surface: #ffffff;
  --color-bg-surface-hover: #f5f6fb;
  --color-bg-muted: #eceff6;
  --color-bg-backdrop: rgba(15, 23, 42, 0.38);
  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-ring: rgba(15, 23, 42, 0.07);
  --glass-blur: blur(18px) saturate(1.5);

  --color-border-subtle: rgba(15, 23, 42, 0.06);
  --color-border-default: rgba(15, 23, 42, 0.12);
  --color-border-strong: #94a3b8;

  --color-text-primary: #0f172a;
  --color-text-secondary: #46536a;
  --color-text-muted: #5b6a82;
  --color-text-inverse: #ffffff;

  --color-accent: #4f46e5;
  --color-accent-2: #7c3aed;
  --on-accent: #ffffff;
  --paper: #ffffff;
  --paper-edge: rgba(15, 23, 42, 0.08);
  --color-accent-soft: rgba(79, 70, 229, 0.1);
  --color-focus: #0284c7;
  --gradient-accent: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --gradient-page: radial-gradient(1200px 700px at 8% -10%, #e0e7ff 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #fce7f3 0%, transparent 55%);

  --color-status-success: #15803d;
  --color-status-warning: #b45309;
  --fav-star-on: var(--color-accent); /* rotas salvas: mesma cor de destaque do app */
  --color-status-error: #b91c1c;
  --color-status-error-bg: rgba(185, 28, 28, 0.08);
  --color-status-info: #0369a1;

  /* ========================================================================
     4. TIPOGRAFIA
     ======================================================================== */
  --font-family-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra: 800;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* ========================================================================
     5. ESPAÇAMENTO E GEOMETRIA (cantos 16–28px)
     ======================================================================== */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --touch-target-min: 44px;
  --touch-target-dense: 40px;
  --sidebar-width: 328px;
  --panel-routes-width: 408px;
  --header-height: 48px;
  --edge: 16px;

  /* ========================================================================
     6. ELEVAÇÃO (sombras suaves em camadas) E MOVIMENTO
     ======================================================================== */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 16px rgba(15, 23, 42, 0.08), 0 16px 32px -8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.1), 0 28px 56px -12px rgba(15, 23, 42, 0.16);
  --shadow-panel: var(--shadow-lg);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 160ms var(--ease);
  --transition-normal: 260ms var(--ease);
  --transition-slow: 420ms var(--ease);

  /* Camadas */
  --z-map: 1;
  --z-map-controls: 20;
  --z-panel: 30;
  --z-sidebar: 40;
  --z-header: 50;
  --z-autocomplete: 60;
  --z-tooltip: 70;
  --z-modal: 100;
}

/* Tema escuro (definido por JS via [data-theme] a partir de prefers-color-scheme ou escolha do usuário) */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Mapa: papel escuro; os rótulos pretos do SVG viram claros (regras em style.css) e as cores oficiais das linhas não mudam. */
  --paper: #131a2e;
  --map-label: #eef1fb;
  --map-dimmed-line: #38425f;
  --map-dimmed-ring: #38425f;
  --map-dimmed-dot: #131a2e;
  --paper-edge: rgba(255, 255, 255, 0.10);
  --map-dimmed-label-opacity: 0.5;
  --color-bg-base: #0c101d;
  --color-bg-surface: #161c30;
  --color-bg-surface-hover: #1d2540;
  --color-bg-muted: #1f2842;
  --color-bg-backdrop: rgba(3, 6, 15, 0.62);
  --glass-bg: rgba(22, 28, 48, 0.9);
  --glass-bg-strong: rgba(22, 28, 48, 0.94);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-ring: rgba(255, 255, 255, 0.07);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-default: rgba(255, 255, 255, 0.16);
  --color-border-strong: #7f8aa8;
  --color-text-primary: #eef1fb;     /* 15,6:1 sobre a superfície */
  --color-text-secondary: #bcc5dc;   /* 9,7:1 */
  --color-text-muted: #9aa5c2;       /* 6,6:1 */
  --color-text-inverse: #0c101d;
  --color-accent: #a5a6fb;           /* texto/realce sobre superfícies escuras: 7,3:1 */
  --color-accent-soft: rgba(165, 166, 251, 0.16);
  --color-focus: #38bdf8;
  --on-accent: #ffffff;
  --gradient-accent: linear-gradient(135deg, #5b5ef0 0%, #8b4ff0 100%);   /* branco sobre ele: 5,5:1 */
  --gradient-page: radial-gradient(1100px 700px at 8% -10%, #1b2152 0%, transparent 60%), radial-gradient(900px 600px at 100% 0%, #35153f 0%, transparent 55%);
  --color-status-success: #4ade80;
  --fav-star-on: #fbbf24;            /* >9:1 sobre a superfície escura */
  --color-status-error: #fca5a5;
  --color-status-error-bg: rgba(248, 113, 113, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35), 0 16px 32px -8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45), 0 28px 56px -12px rgba(0, 0, 0, 0.55);
}