/* Bela Obra — design tokens (extraídos do wireframe/design system) */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../assets/fonts/DMSans-opsz-wght-.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../assets/fonts/DMSans-Italic-opsz-wght-.ttf') format('truetype-variations');
}

:root {
  /* Cores base — rampa marrom/bege monocromática, per brandbook */
  --brown-900: #583D30;
  --brown-800: #644B3E;
  --brown-700: #6E5649;
  --brown-600: #7F695B;
  --brown-500: #A18F81;
  --brown-400: #B5A697;
  --brown-300: #CFC3B4;
  --brown-200: #E6DDCD;
  --brown-100: #F1EADA;
  --beige: #DED5C5;
  --white: #FFFFFF;

  /* Aliases semânticos */
  --surface-page: var(--beige);
  --surface-card: var(--brown-100);
  --surface-inverse: var(--brown-900);
  --surface-sunken: var(--brown-200);
  --border-default: var(--brown-400);
  --border-subtle: var(--brown-300);
  --text-primary: var(--brown-900);
  --text-secondary: var(--brown-700);
  --text-muted: var(--brown-500);
  --text-on-inverse: var(--brown-100);
  --text-on-inverse-muted: var(--brown-400);
  --accent: var(--brown-900);
  --accent-hover: #4A3327;
  --accent-active: #3E2A20;

  /* Tipografia */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-display-xl: clamp(2.75rem, 5vw, 4.5rem);
  --text-display-l: clamp(2.25rem, 3.6vw, 3.25rem);
  --text-display-m: 2rem;
  --text-heading-l: 1.5rem;
  --text-heading-m: 1.25rem;
  --text-body-l: 1.125rem;
  --text-body-m: 1rem;
  --text-body-s: 0.875rem;
  --text-caption: 0.75rem;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --leading-display: 1.1;
  --leading-body: 1.2;
  --leading-relaxed: 1.5;

  /* Espaçamento */
  --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-32: 128px;
  --container-max: 1200px;

  /* Forma — cantos retos + notch assinatura; pill só em controles pequenos */
  --radius-none: 0px;
  --radius-pill: 999px;
  --notch-size: 28px;
  --notch-size-l: 48px;
  --shadow-none: none;
}