/* RollDDie identity tokens — colhidos do "RollDDie Design System" no Claude
   Design (via DesignSync). Fonte da verdade pra cores/tipografia/espaçamento
   da interface nova; --legacy-* mantido só de referência do que a mesa/tema
   3D ainda usa (fora de escopo desta repaginação). */
:root {
  /* base — identity swatches */
  --void: #08002d;
  --pitch: #080000;
  --violet: #2e0684;
  --purple: #ae00ff;
  --pink: #ff0074;
  --acid: #e9ef00;
  --green: #05c600;
  --white: #ffffff;

  /* neutrals derived from void + violet */
  --surface-0: #050019;
  --surface-1: #08002d;
  --surface-2: #0e0338;
  --surface-3: #170a47;
  --surface-4: #22106b;

  /* foreground */
  --fg-1: #ffffff;
  --fg-2: #cfc0f2;
  --fg-3: #8f7ec4;
  --fg-on-brand: #ffffff;
  --fg-on-acid: #08002d;

  /* lines */
  --line-1: rgba(174, 0, 255, 0.28);
  --line-2: rgba(174, 0, 255, 0.16);
  --line-3: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(174, 0, 255, 0.6);

  /* gradients from the identity's ramp bar */
  --ramp-brand: linear-gradient(90deg, #2e0684 0%, #ae00ff 52%, #2e0684 100%);
  --ramp-cta: linear-gradient(180deg, #c93cff 0%, #ae00ff 55%, #7a00b4 100%);
  --ramp-panel: linear-gradient(180deg, #170a47 0%, #08002d 100%);
  --ramp-table: radial-gradient(120% 90% at 50% 0%, #22106b 0%, #08002d 55%, #050019 100%);

  /* semantic aliases */
  --brand: var(--purple);
  --brand-deep: var(--violet);
  --accent: var(--pink);
  --warning: var(--acid);
  --success: var(--green);
  --crit-success: var(--green);
  --crit-fail: var(--pink);

  --surface-app: var(--surface-1);
  --surface-card: var(--surface-3);
  --surface-sunken: rgba(0, 0, 0, 0.35);
  --surface-hud: rgba(8, 0, 45, 0.82);
  --surface-ghost: rgba(174, 0, 255, 0.1);

  --text-body: var(--fg-2);
  --text-heading: var(--fg-1);
  --text-muted: var(--fg-3);
  --text-brand: var(--purple);

  --border-control: var(--line-1);
  --border-card: var(--line-1);
  --border-quiet: var(--line-2);

  /* typography */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-eyebrow: 10px;
  --text-micro: 11px;
  --text-tiny: 12px;
  --text-small: 13px;
  --text-body-size: 14px;
  --text-lead: 16px;
  --text-title: 19px;
  --text-title-lg: 22px;
  --text-display-sm: 28px;
  --text-display: 40px;
  --text-display-lg: 64px;

  --lh-tight: 1.1;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --lh-loose: 1.7;

  --track-eyebrow: 0.18em;
  --track-label: 0.12em;
  --track-cta: 0.12em;
  --track-title: 0.06em;
  --track-tight: 0.01em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 22px;
  --space-10: 24px;
  --space-11: 26px;
  --space-12: 32px;
  --space-13: 40px;
  --space-14: 48px;

  --control-hud: 44px;
  --control-md: 34px;
  --control-sm: 28px;
  --control-lg: 54px;
  --track-w: 44px;
  --track-h: 24px;
  --knob: 20px;
  --meter-h: 10px;
  --drawer-w: 380px;
  --panel-w: 440px;
  --modal-w: 460px;

  /* radius */
  --radius-swatch: 5px;
  --radius-chip: 8px;
  --radius-control: 9px;
  --radius-input: 10px;
  --radius-group: 11px;
  --radius-button: 12px;
  --radius-card: 14px;
  --radius-cta: 16px;
  --radius-panel: 18px;
  --radius-pill: 999px;
  --radius-icon: 22.5%;

  /* elevation */
  --shadow-button: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-hud: 0 6px 20px rgba(0, 0, 0, 0.5);
  --shadow-cta: 0 8px 22px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 22px 55px rgba(0, 0, 0, 0.65);
  --shadow-drawer: -18px 0 44px rgba(0, 0, 0, 0.55);
  --shadow-inset-swatch: inset 0 0 0 1px rgba(0, 0, 0, 0.35);

  --glow-purple: 0 0 16px rgba(174, 0, 255, 0.55);
  --glow-pink: 0 0 16px rgba(255, 0, 116, 0.55);
  --glow-acid: 0 0 16px rgba(233, 239, 0, 0.5);
  --glow-green: 0 0 12px rgba(5, 198, 0, 0.6);
  --glow-soft: 0 0 24px rgba(174, 0, 255, 0.28);

  --blur-hud: 6px;
  --blur-panel: 10px;

  /* motion */
  --dur-meter: 0.05s;
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.32s;
  --ease-drawer: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --transition-control: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);

  /* legacy tabletop skin — mesa/temas 3D, fora de escopo desta repaginação */
  --legacy-gold: #f0d387;
  --legacy-gold-deep: #c9a24a;
  --legacy-ink: #e9dcbd;
  --legacy-muted: #b8a883;
  --legacy-bg: #0e0b07;
  --legacy-ember: #ff7a2e;
  --legacy-felt: #3d8a63;
}