/* Ever Designer Design System · v1.0
   Design tokens — fonte única de verdade para cores, tipografia, espaços,
   radius, bordas, containers, motion e camadas. Extraído de index.html. */

/* No site, as fontes são carregadas localmente por fonts.css (o @import do Google Fonts do DS foi removido desta cópia). */

:root {
  color-scheme: dark;

  /* Base */
  --color-black: #000103;
  --color-white: #E7E7E7;
  --color-blue: #0000EE;

  /* Primary */
  --color-primary: #0000EE;
  --color-primary-hover: #1F1FFF;
  --color-primary-active: #0000BF;
  --color-primary-muted: rgba(0, 0, 238, 0.24);
  --color-primary-text: #7575FF;
  --color-focus: #4D4DFF;

  /* Background */
  --color-bg: #000103;
  --color-bg-secondary: #05060A;
  --color-bg-tertiary: #0A0B10;

  /* Surface */
  --color-surface: #0E0F15;
  --color-surface-hover: #15161E;
  --color-surface-light: #E7E7E7;
  --color-surface-light-hover: #F4F4F4;
  --color-surface-light-active: #CDCDCF;

  /* Text */
  --color-text-primary: #E7E7E7;
  --color-text-secondary: #A3A3A7;
  --color-text-muted: #7B7C82;
  --color-text-disabled: #46474E;
  --color-text-inverse: #000103;
  --color-text-on-primary: #E7E7E7;
  --color-text-on-primary-muted: #B4B4E8;
  --color-ink-secondary: #4A4B52;
  --color-ink-muted: #65666D;

  /* Border */
  --color-border: rgba(231, 231, 231, 0.12);
  --color-border-strong: rgba(231, 231, 231, 0.25);
  --color-border-hover: rgba(231, 231, 231, 0.40);
  --color-border-inverse: rgba(0, 1, 3, 0.12);
  --color-border-on-primary: rgba(231, 231, 231, 0.32);

  /* Feedback — uso funcional, apenas validação */
  --color-error: #FF5A4E;
  --color-error-muted: rgba(255, 90, 78, 0.16);
  --color-success: #3DDC97;
  --color-success-muted: rgba(61, 220, 151, 0.16);

  /* Overlays */
  --color-ghost-hover: rgba(231, 231, 231, 0.06);
  --color-ghost-active: rgba(231, 231, 231, 0.10);
  --color-disabled-bg: rgba(231, 231, 231, 0.06);
  --color-editorial: rgba(231, 231, 231, 0.03);
  --color-header: rgba(0, 1, 3, 0.84);
  --color-grid-column: rgba(0, 0, 238, 0.20);

  /* Typography */
  --font-display: "Parkinsans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

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

  --fs-mega: clamp(6rem, 22vw, 20rem);
  --fs-display: clamp(4.5rem, 15.5vw, 14rem);
  --fs-logo-xl: clamp(2.5rem, 11.5vw, 10.5rem);
  --fs-logo-lg: clamp(2.5rem, 7vw, 6rem);
  --fs-logo-md: clamp(2rem, 5vw, 4.5rem);
  --fs-h1: 56px;
  --fs-h2: 44px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-button: 14px;
  --fs-button-lg: 16px;
  --fs-label-lg: 14px;
  --fs-label: 12px;
  --fs-caption: 12px;

  --lh-display: 0.95;
  --lh-heading: 1.05;
  --lh-ui: 1.25;
  --lh-body-sm: 1.5;
  --lh-body: 1.6;

  --ls-display: -0.04em;
  --ls-heading: -0.02em;
  --ls-logo: -0.02em;
  --ls-normal: 0;
  --ls-label: 0.08em;

  /* Spacing — múltiplos de 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --border-dashed: 1px dashed var(--color-border-strong);
  --border-inverse: 1px solid var(--color-border-inverse);

  /* Containers & grid */
  --container-max: 1440px;
  --grid-columns: 12;
  --gutter: 24px;
  --page-margin: 80px;
  --section-space: 160px;
  --text-max: 64ch;

  /* Breakpoints (referência) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* Controls & icons */
  --control-2xs: 24px;
  --control-xs: 32px;
  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 56px;
  --toggle-size: 20px;
  --switch-width: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.5;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-arrow: 450ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Elevation & focus */
  --shadow-soft: 0 24px 64px rgba(0, 1, 3, 0.56);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

@media (max-width: 1439px) {
  :root { --page-margin: 48px; --section-space: 120px; }
}

@media (max-width: 1023px) {
  :root { --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 28px; --grid-columns: 8; --page-margin: 32px; --section-space: 96px; }
}

@media (max-width: 767px) {
  :root { --fs-h1: 36px; --fs-h2: 30px; --fs-h3: 24px; --grid-columns: 4; --page-margin: 20px; --section-space: 80px; }
}