/*
 * VIDA UI Foundations
 * Fonte canônica dos tokens primitivos.
 * O espelho de runtime deve permanecer idêntico em app/public/tokens.css.
 */
:root {
  /* Cores primitivas */
  --vida-color-brand-50: #e6f7f4;
  --vida-color-brand-100: #c9eee8;
  --vida-color-brand-200: #b7efe4;
  --vida-color-brand-300: #6bd3c5;
  --vida-color-brand-400: #35c6b4;
  --vida-color-brand-500: #009688;
  --vida-color-brand-600: #00796b;
  --vida-color-brand-700: #00695c;
  --vida-color-brand-800: #005f55;
  --vida-color-blue-50: #eff8ff;
  --vida-color-blue-100: #dbeafe;
  --vida-color-blue-600: #0284c7;
  --vida-color-blue-700: #1d4ed8;
  --vida-color-green-50: #f0fdf4;
  --vida-color-green-100: #dcfce7;
  --vida-color-green-200: #bbf7d0;
  --vida-color-green-600: #16a34a;
  --vida-color-green-800: #166534;
  --vida-color-yellow-50: #fffbeb;
  --vida-color-yellow-100: #fef3c7;
  --vida-color-yellow-500: #f59e0b;
  --vida-color-yellow-800: #92400e;
  --vida-color-red-50: #fff1f2;
  --vida-color-red-100: #fee2e2;
  --vida-color-red-200: #fecaca;
  --vida-color-red-300: #fecdd3;
  --vida-color-red-600: #e11d48;
  --vida-color-red-800: #991b1b;
  --vida-color-red-900: #9f1239;
  --vida-color-purple-600: #9333ea;
  --vida-color-orange-600: #ea580c;
  --vida-color-neutral-0: #ffffff;
  --vida-color-neutral-25: #f8fafc;
  --vida-color-neutral-50: #f4f7fb;
  --vida-color-neutral-100: #f1f5f9;
  --vida-color-neutral-150: #eef2f6;
  --vida-color-neutral-200: #e3e8ef;
  --vida-color-neutral-400: #98a2b3;
  --vida-color-neutral-500: #667085;
  --vida-color-neutral-600: #475467;
  --vida-color-neutral-700: #344054;
  --vida-color-neutral-900: #172033;
  --vida-color-neutral-950: #0f172a;
  --vida-color-black: #000000;
  --vida-color-dark-canvas: #0b1220;
  --vida-color-dark-surface: #111b2e;
  --vida-color-dark-surface-subtle: #172238;
  --vida-color-dark-surface-muted: #1d2a42;
  --vida-color-dark-border: #2b3952;
  --vida-color-dark-text: #f1f5f9;
  --vida-color-dark-text-secondary: #d4dce8;
  --vida-color-dark-muted: #a6b1c2;
  --vida-color-dark-subtle: #8793a6;
  --vida-color-dark-brand-surface: #123f3b;
  --vida-color-dark-brand-border: #23665e;
  --vida-color-dark-gradient-start: #064e46;
  --vida-color-dark-secondary: #7dd3fc;
  --vida-color-dark-success: #4ade80;
  --vida-color-dark-success-surface: #123821;
  --vida-color-dark-success-border: #23653a;
  --vida-color-dark-success-text: #bbf7d0;
  --vida-color-dark-warning: #fbbf24;
  --vida-color-dark-warning-surface: #3a2b0c;
  --vida-color-dark-warning-strong-surface: #4a3610;
  --vida-color-dark-warning-text: #fde68a;
  --vida-color-dark-danger: #fb7185;
  --vida-color-dark-danger-surface: #401922;
  --vida-color-dark-danger-strong-surface: #51202a;
  --vida-color-dark-danger-hover: #672936;
  --vida-color-dark-danger-border: #7f3040;
  --vida-color-dark-danger-text: #fecdd3;
  --vida-color-dark-danger-strong-text: #ffe4e6;
  --vida-color-dark-info: #38bdf8;
  --vida-color-dark-info-surface: #102f4a;
  --vida-color-dark-info-text: #bae6fd;
  --vida-color-dark-purple: #c084fc;
  --vida-color-dark-orange: #fb923c;

  /* Opacidades e cores translúcidas */
  --vida-alpha-white-80: rgb(255 255 255 / 80%);
  --vida-alpha-white-93: rgb(255 255 255 / 93%);
  --vida-alpha-white-97: rgb(255 255 255 / 97%);
  --vida-alpha-white-13: rgb(255 255 255 / 13%);
  --vida-alpha-white-28: rgb(255 255 255 / 28%);
  --vida-alpha-white-32: rgb(255 255 255 / 32%);
  --vida-alpha-brand-10: rgb(0 121 107 / 10%);
  --vida-alpha-brand-30: rgb(0 121 107 / 30%);
  --vida-alpha-brand-35: rgb(0 121 107 / 35%);
  --vida-alpha-neutral-4: rgb(15 23 42 / 4%);
  --vida-alpha-neutral-8: rgb(15 23 42 / 8%);
  --vida-alpha-overlay: rgb(23 32 51 / 48%);
  --vida-alpha-dark-overlay: rgb(0 0 0 / 64%);
  --vida-alpha-dark-navigation: rgb(17 27 46 / 97%);
  --vida-alpha-dark-focus: rgb(107 211 197 / 45%);
  --vida-alpha-dark-hover-border: rgb(107 211 197 / 55%);
  --vida-alpha-dark-shadow-low: rgb(0 0 0 / 18%);
  --vida-alpha-dark-shadow-medium: rgb(0 0 0 / 28%);

  /* Tipografia */
  --vida-font-family-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --vida-font-size-display: clamp(1.75rem, 1.55rem + 1vw, 2rem);
  --vida-font-size-heading-1: clamp(1.625rem, 1.45rem + .75vw, 1.75rem);
  --vida-font-size-heading-2: clamp(1.375rem, 1.25rem + .5vw, 1.5rem);
  --vida-font-size-heading-3: 1.125rem;
  --vida-font-size-heading-4: 1rem;
  --vida-font-size-compact-lg: 1.0625rem;
  --vida-font-size-compact-sm: .9375rem;
  --vida-font-size-body-lg: 1rem;
  --vida-font-size-body: .875rem;
  --vida-font-size-body-sm: .8125rem;
  --vida-font-size-caption: .75rem;
  --vida-font-size-label: .8125rem;
  --vida-font-size-button: .8125rem;
  --vida-font-size-overline: .6875rem;
  --vida-font-size-micro: .625rem;
  --vida-font-size-nano: .5625rem;
  --vida-font-size-indicator: .5rem;
  --vida-font-size-brand: 1.25rem;
  --vida-font-size-promotional: 1.3125rem;
  --vida-line-height-display: 1.25;
  --vida-line-height-heading: 1.333;
  --vida-line-height-body-lg: 1.5;
  --vida-line-height-body: 1.571;
  --vida-line-height-body-sm: 1.538;
  --vida-line-height-caption: 1.333;
  --vida-font-weight-light: 300;
  --vida-font-weight-regular: 400;
  --vida-font-weight-medium: 500;
  --vida-font-weight-semibold: 600;
  --vida-font-weight-bold: 700;
  --vida-font-weight-extra-bold: 800;
  --vida-letter-spacing-heading: -.025em;
  --vida-letter-spacing-overline: .04em;
  --vida-letter-spacing-brand: .02em;
  --vida-measure-text: 75ch;

  /* Espaçamento — base 4 px */
  --vida-space-0: 0;
  --vida-space-1: .25rem;
  --vida-space-2: .5rem;
  --vida-space-3: .75rem;
  --vida-space-4: 1rem;
  --vida-space-5: 1.25rem;
  --vida-space-6: 1.5rem;
  --vida-space-7: 1.75rem;
  --vida-space-8: 2rem;
  --vida-space-9: 2.25rem;
  --vida-space-10: 2.5rem;
  --vida-space-12: 3rem;
  --vida-space-16: 4rem;

  /* Bordas */
  --vida-border-width-0: 0;
  --vida-border-width-1: 1px;
  --vida-border-width-2: 2px;
  --vida-border-width-3: 3px;
  --vida-border-width-4: 4px;
  --vida-border-width-5: 5px;
  --vida-border-style-solid: solid;
  --vida-border-style-dashed: dashed;

  /* Raios */
  --vida-radius-xs: .375rem;
  --vida-radius-sm: .75rem;
  --vida-radius-control: .875rem;
  --vida-radius-card: 1.125rem;
  --vida-radius-hero: 1.5rem;
  --vida-radius-pill: 999px;
  --vida-radius-circle: 50%;

  /* Sombras */
  --vida-shadow-none: none;
  --vida-shadow-low: 0 .375rem 1.25rem var(--vida-alpha-neutral-4);
  --vida-shadow-medium: 0 .75rem 1.875rem var(--vida-alpha-neutral-8);
  --vida-shadow-focus: 0 0 0 .1875rem var(--vida-alpha-brand-10);

  /* Camadas */
  --vida-z-base: 0;
  --vida-z-sticky: 20;
  --vida-z-navigation: 40;
  --vida-z-backdrop: 45;
  --vida-z-sidebar: 50;
  --vida-z-modal-backdrop: 80;
  --vida-z-modal: 81;
  --vida-z-skip-link: 100;

  /* Movimento */
  --vida-duration-instant: 1ms;
  --vida-duration-fast: 120ms;
  --vida-duration-normal: 200ms;
  --vida-duration-slow: 300ms;
  --vida-duration-skeleton: 1400ms;
  --vida-easing-standard: cubic-bezier(.2, .8, .2, 1);
  --vida-easing-linear: linear;
  --vida-motion-lift: -.1875rem;
  --vida-motion-drawer-hidden: -105%;

  /* Breakpoints — referência; CSS não aceita var() em @media */
  --vida-breakpoint-mobile: 640px;
  --vida-breakpoint-tablet: 1200px;
  --vida-breakpoint-wide: 1320px;

  /* Grid e layout */
  --vida-grid-columns-desktop: 12;
  --vida-grid-columns-tablet: 8;
  --vida-grid-columns-mobile: 4;
  --vida-grid-gutter-desktop: var(--vida-space-6);
  --vida-grid-gutter-tablet: var(--vida-space-5);
  --vida-grid-gutter-mobile: var(--vida-space-4);
  --vida-container-max: 105rem;
  --vida-sidebar-width: 17.5rem;
  --vida-header-height: 4.875rem;
  --vida-target-min: 2.75rem;

  /* Aliases legados de Foundations */
  --vida-shadow: var(--vida-shadow-medium);
  --vida-motion-fast: var(--vida-duration-fast);
  --vida-motion: var(--vida-duration-normal);
  --vida-motion-slow: var(--vida-duration-slow);
  --vida-ease: var(--vida-easing-standard);
}
