/* ============================================
   TOKENS — primitivos + semânticos
   Single source of truth shared by:
   - design/styles.css (static HTML via Tailwind CDN)
   - design/ui/src/index.css (Vite/Tailwind v4)
   Selector: .dark works for both `html.dark` (static) and any `.dark` ancestor (React).
   ============================================ */
:root {
  /* — global.color — */
  --color-violet-100: #ede9fe;
  --color-violet-300: #9b7fff;
  --color-violet-500: #7b5cfa;
  --color-violet-700: #6244e5;
  --color-violet-900: #3b1fab;

  --color-gold-100: #fff8e0;
  --color-gold-200: #ffeeb0;
  --color-gold-300: #ffe066;
  --color-gold-400: #ffd84d;
  --color-gold-500: #ffcc33;
  --color-gold-600: #f0b400;
  --color-gold-700: #e0a800;
  --color-gold-800: #946c00;
  --color-gold-900: #5a4200;

  --color-teal-100: #ccfbf1;
  --color-teal-300: #00d4aa;
  --color-teal-500: #009e80;
  --color-teal-700: #00705a;

  --color-coral-100: #ffe4e9;
  --color-coral-300: #ff4d6a;
  --color-coral-500: #e8234a;
  --color-coral-700: #b8102e;

  --color-salmon-100: #fceef1;
  --color-salmon-200: #f8d5dd;
  --color-salmon-300: #f4b3c0;
  --color-salmon-400: #f994a9;
  --color-salmon-500: #f26885;
  --color-salmon-600: #d03555;
  --color-salmon-700: #b82e4f;
  --color-salmon-800: #7a1f37;
  --color-salmon-900: #4a1422;

  --color-sky-100: #e0f2fe;
  --color-sky-300: #38bdf8;
  --color-sky-500: #0284c7;
  --color-sky-700: #0369a1;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #f4f4f8;
  --color-neutral-100: #ebebf2;
  --color-neutral-200: #d4d3e0;
  --color-neutral-400: #000001;
  --color-neutral-600: #7a7a9d;
  --color-neutral-800: #1a1a26;
  --color-neutral-850: #222230;
  --color-neutral-900: #12121a;
  --color-neutral-950: #0a0a0f;

  /* Aliases (compat. tailwind-theme / HTML existente) */
  --color-violet-200: var(--color-violet-100);
  --color-violet-400: var(--color-violet-300);
  --color-violet-600: var(--color-violet-500);
  --color-violet-800: var(--color-violet-700);
  --color-neutral-300: var(--color-neutral-200);
  --color-neutral-500: var(--color-neutral-400);
  --color-neutral-700: var(--color-neutral-800);
  --color-neutral-1000: var(--color-neutral-950);
  --color-neutral-black: var(--color-neutral-950);
  --color-sky-200: var(--color-sky-100);
  --color-sky-400: var(--color-sky-300);
  --color-sky-600: var(--color-sky-500);
  --color-sky-800: var(--color-sky-500);
  --color-sky-900: var(--color-sky-700);
  --color-sky-950: var(--color-sky-700);
  --color-teal-200: var(--color-teal-100);
  --color-teal-400: var(--color-teal-300);
  --color-teal-600: var(--color-teal-500);
  --color-teal-800: var(--color-teal-700);
  --color-coral-200: var(--color-coral-100);
  --color-coral-400: var(--color-coral-300);
  --color-coral-600: var(--color-coral-500);
  --color-coral-800: var(--color-coral-700);
  --color-coral-900: var(--color-coral-700);
  --color-coral-950: var(--color-coral-700);

  /* — global.radius / spacing — */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-full: 100px;
  --radius: var(--radius-md);
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;

  /* — light — */
  --bg-base: var(--color-neutral-50);
  --bg-surface: var(--color-neutral-0);
  --bg-surface-raised: var(--color-neutral-100);
  --bg-surface-high: var(--color-neutral-200);
  --bg-surface-overlay: var(--color-neutral-0);
  --bg-muted: var(--color-neutral-200);

  --border-default: rgba(0, 0, 0, 0.07);
  --border-strong: rgba(0, 0, 0, 0.12);
  --border-accent-sky: rgba(2, 132, 199, 0.18);

  --text-primary: #0e0d1a;
  --text-secondary: rgba(14, 13, 26, 0.45);
  --text-muted: var(--color-neutral-400);
  --text-subtle: rgba(14, 13, 26, 0.45);
  --text-inverse: var(--color-neutral-0);
  --text-on-brand: var(--color-gold-900);

  --brand-main: var(--color-gold-700);
  --brand-main-hover: var(--color-gold-400);
  --brand-main-muted: var(--color-gold-600);
  --brand-main-bg: rgba(255, 204, 51, 0.22);
  --brand-main-bd: rgba(148, 108, 0, 0.38);
  --brand-main-fill: var(--color-gold-600);
  --brand-on-main: #1a1505;
  --brand-subtle: var(--color-gold-900);
  --border-brand: var(--brand-main-bd);

  --accent-sky: var(--color-sky-500);
  --accent-sky-muted: var(--color-sky-100);
  --accent-sky-bg: rgba(2, 132, 199, 0.08);
  --accent-sky-bg-subtle: rgba(2, 132, 199, 0.04);
  --accent-sky-bd: rgba(2, 132, 199, 0.18);

  --accent-teal: var(--color-teal-500);
  --accent-teal-muted: var(--color-teal-100);
  --accent-teal-bg: rgba(0, 158, 128, 0.08);
  --accent-teal-bd: rgba(0, 158, 128, 0.18);

  --accent-coral: var(--color-coral-500);
  --accent-coral-muted: var(--color-coral-100);
  --accent-coral-bg: rgba(232, 35, 74, 0.08);
  --accent-coral-bg-subtle: rgba(232, 35, 74, 0.04);
  --accent-coral-bd: rgba(232, 35, 74, 0.18);

  --lay: var(--color-salmon-600);
  --lay-bg: rgba(208, 53, 85, 0.1);
  --lay-bg-subtle: rgba(208, 53, 85, 0.04);
  --lay-bd: rgba(208, 53, 85, 0.32);

  --status-error: var(--color-coral-500);
  --status-error-bg: rgba(232, 35, 74, 0.08);
  --status-success: var(--color-teal-500);
  --status-success-bg: var(--accent-teal-bg);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* Layout / efeitos */
  --glass-panel-bg: color-mix(in srgb, var(--bg-surface-overlay) 85%, transparent);
  --glass-panel-blur: 20px;
  --glass-panel-border: var(--border-accent-sky);
  --graph-x-inset-x: 35px;
  --layout-page-header-gap: 32px;
  --layout-page-sidebar-inset: 32px;
  --layout-dashboard-card-gap: 24px;
  --chart-tooltip-shadow: var(--shadow-panel);
  --modal-backdrop: color-mix(in srgb, var(--bg-base) 82%, transparent);
  --modal-width-sm: 22rem;
  --modal-width-md: 28rem;
  --modal-width-lg: 74rem;
  --dropdown-shadow: var(--shadow-panel);
  --brand-glow-sky: color-mix(in srgb, var(--color-sky-300) 8%, transparent);
  --brand-glow-violet: color-mix(in srgb, var(--color-gold-400) 12%, transparent);

  --overlay-subtle: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --overlay-medium: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --overlay-faint: color-mix(in srgb, var(--text-primary) 4%, transparent);
  --state-hover-bg: color-mix(in srgb, var(--text-primary) 7%, transparent);
  --state-active-bg: color-mix(in srgb, var(--text-primary) 9%, transparent);
  --chart-range-chip-hover: var(--state-hover-bg);
  --chart-range-chip-active: var(--state-active-bg);

  /* Chart fills — light (tokens-charts.json) */
  --chart-win-gradient-from: rgba(0, 158, 128, 0.18);
  --chart-win-gradient-to: rgba(0, 158, 128, 0.45);
  --chart-win-solid: rgba(0, 158, 128, 0.35);
  --chart-win-hover: rgba(0, 158, 128, 0.85);
  --chart-loss-gradient-from: rgba(232, 35, 74, 0.18);
  --chart-loss-gradient-to: rgba(232, 35, 74, 0.45);
  --chart-loss-solid: rgba(232, 35, 74, 0.35);
  --chart-loss-hover: rgba(232, 35, 74, 0.85);
  --chart-lay-gradient-from: rgba(208, 53, 85, 0.18);
  --chart-lay-gradient-to: rgba(208, 53, 85, 0.45);
  --chart-lay-solid: rgba(208, 53, 85, 0.35);
  --chart-lay-hover: rgba(208, 53, 85, 0.85);
  --chart-brand-stroke: rgba(148, 108, 0, 0.85);
  --chart-brand-stroke-hi: rgba(148, 108, 0, 0.7);
  --chart-brand-area-from: rgba(255, 204, 51, 0.2);
  --chart-brand-area-to: rgba(255, 204, 51, 0);
  --chart-brand-marker: #946c00;
  --chart-brand-marker-glow: rgba(255, 204, 51, 0.25);
  --chart-idle-solid: #d4d3e0;
  --chart-grid-line: rgba(0, 0, 0, 0.05);
  --chart-grid-axis: rgba(0, 0, 0, 0.1);
  --chart-grid-label: #8887a8;

  --overlay-backdrop: color-mix(in srgb, var(--color-neutral-950) 60%, transparent);
  --shadow-brand: 0 6px 20px rgba(255, 204, 51, 0.55);
  --shadow-brand-soft: 0 0 40px color-mix(in srgb, var(--color-gold-300) 12%, transparent);
}

html.dark,
.dark {
  /* — dark — */
  --bg-base: var(--color-neutral-950);
  --bg-surface: var(--color-neutral-900);
  --bg-surface-raised: var(--color-neutral-800);
  --bg-surface-high: var(--color-neutral-850);
  --bg-surface-overlay: var(--color-neutral-950);
  --bg-muted: var(--color-neutral-800);

  --border-default: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --border-accent-sky: rgba(56, 189, 248, 0.22);

  --text-primary: #f0eff8;
  --text-secondary: rgba(240, 239, 248, 0.45);
  --text-muted: var(--color-neutral-600);
  --text-subtle: rgba(240, 239, 248, 0.45);
  --text-inverse: var(--color-neutral-950);
  --text-on-brand: var(--color-gold-300);

  --brand-main: var(--color-gold-500);
  --brand-main-hover: var(--color-gold-400);
  --brand-main-muted: var(--color-gold-500);
  --brand-main-bg: rgba(255, 204, 51, 0.14);
  --brand-main-bd: rgba(255, 204, 51, 0.32);
  --brand-main-fill: var(--color-gold-500);
  --brand-on-main: #1a1505;
  --brand-subtle: var(--color-gold-300);
  --border-brand: var(--brand-main-bd);

  --accent-sky: var(--color-sky-300);
  --accent-sky-muted: var(--color-sky-500);
  --accent-sky-bg: rgba(56, 189, 248, 0.1);
  --accent-sky-bg-subtle: rgba(56, 189, 248, 0.05);
  --accent-sky-bd: rgba(56, 189, 248, 0.22);

  --accent-teal: var(--color-teal-300);
  --accent-teal-muted: var(--color-teal-100);
  --accent-teal-bg: rgba(0, 212, 170, 0.1);
  --accent-teal-bd: rgba(0, 212, 170, 0.22);

  --accent-coral: var(--color-coral-300);
  --accent-coral-muted: var(--color-coral-100);
  --accent-coral-bg: rgba(255, 77, 106, 0.12);
  --accent-coral-bg-subtle: rgba(255, 77, 106, 0.06);
  --accent-coral-bd: rgba(255, 77, 106, 0.25);

  --lay: var(--color-salmon-400);
  --lay-bg: rgba(249, 148, 169, 0.14);
  --lay-bg-subtle: rgba(249, 148, 169, 0.06);
  --lay-bd: rgba(249, 148, 169, 0.32);

  --status-error: var(--color-coral-300);
  --status-error-bg: rgba(255, 77, 106, 0.12);
  --status-success: var(--color-teal-300);
  --status-success-bg: var(--accent-teal-bg);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-panel: 0 8px 40px rgba(0, 0, 0, 0.45);

  --glass-panel-bg: color-mix(in srgb, var(--bg-base) 60%, transparent);
  --glass-panel-blur: 24px;
  --glass-panel-border: var(--border-accent-sky);
  --graph-x-inset-x: 5px;
  --chart-tooltip-shadow: var(--shadow-panel);
  --modal-backdrop: color-mix(in srgb, var(--bg-base) 82%, transparent);
  --modal-width-sm: 22rem;
  --modal-width-md: 28rem;
  --modal-width-lg: 74rem;
  --dropdown-shadow: var(--shadow-panel);
  --brand-glow-sky: color-mix(in srgb, var(--color-sky-300) 5%, transparent);
  --brand-glow-violet: color-mix(in srgb, var(--color-gold-500) 10%, transparent);

  --overlay-subtle: color-mix(in srgb, var(--text-primary) 5%, transparent);
  --overlay-medium: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --overlay-faint: color-mix(in srgb, var(--text-primary) 6%, transparent);
  --chart-range-chip-hover: color-mix(in srgb, var(--text-primary) 8%, var(--bg-surface-raised));
  --chart-range-chip-active: var(--color-neutral-850);

  /* Chart fills — dark (tokens-charts.json) */
  --chart-win-gradient-from: rgba(0, 212, 170, 0.25);
  --chart-win-gradient-to: rgba(0, 212, 170, 0.55);
  --chart-win-solid: rgba(0, 212, 170, 0.45);
  --chart-win-hover: rgba(0, 212, 170, 0.85);
  --chart-loss-gradient-from: rgba(255, 77, 106, 0.25);
  --chart-loss-gradient-to: rgba(255, 77, 106, 0.55);
  --chart-loss-solid: rgba(255, 77, 106, 0.45);
  --chart-loss-hover: rgba(255, 77, 106, 0.85);
  --chart-lay-gradient-from: rgba(249, 148, 169, 0.22);
  --chart-lay-gradient-to: rgba(249, 148, 169, 0.5);
  --chart-lay-solid: rgba(249, 148, 169, 0.4);
  --chart-lay-hover: rgba(249, 148, 169, 0.8);
  --chart-brand-stroke: rgba(255, 204, 51, 0.8);
  --chart-brand-stroke-hi: rgba(255, 224, 102, 0.75);
  --chart-brand-area-from: rgba(255, 204, 51, 0.18);
  --chart-brand-area-to: rgba(255, 204, 51, 0);
  --chart-brand-marker: #ffcc33;
  --chart-brand-marker-glow: rgba(255, 204, 51, 0.12);
  --chart-idle-solid: #222230;
  --chart-grid-line: rgba(255, 255, 255, 0.04);
  --chart-grid-axis: rgba(255, 255, 255, 0.08);
  --chart-grid-label: #7a7a9d;

  --overlay-backdrop: color-mix(in srgb, var(--color-neutral-950) 60%, transparent);
  --shadow-brand: 0 6px 20px rgba(255, 204, 51, 0.38);
  --shadow-brand-soft: 0 0 40px color-mix(in srgb, var(--color-gold-500) 10%, transparent);
}