@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --color-background-page: #fff;
  --color-background-muted: #e6e5e4;
  --color-surface-default: #fff;
  --color-text-primary: #0b0b0b;
  --color-text-secondary: #444;
  --color-text-muted: #6b7280;
  --color-border-subtle: #e1e4ed;
  --color-action-primary: #31302E;
  --color-action-primary-text: #fff;
  --color-action-accent: #fbcb49;
  --color-action-accent-text: #0b0b0b;
  --color-control-border: #0b0b0b;

  /* Elevacoes de Sombra */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --shadow-action: var(--shadow-sm);
  --shadow-control: var(--shadow-sm);

  /* Escala de Transicoes */
  --transition-duration-fast: 150ms;
  --transition-duration-normal: 250ms;
  --transition-duration-slow: 350ms;
  --transition-timing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-timing-entrance: cubic-bezier(0, 0, 0.2, 1);
  --transition-timing-bounce: cubic-bezier(0.34, 1.25, 0.64, 1);
  --transition-spring: var(--transition-duration-slow) var(--transition-timing-bounce);

  --font-family-base: Inter, "Segoe UI", sans-serif;
  --layout-header-height: 88px;

  /* //font-size */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;

  --font-size-caption: var(--font-size-xs);
  --font-size-meta: var(--font-size-sm);
  --font-size-label: var(--font-size-sm);
  --font-size-body: var(--font-size-base);
  --font-size-lead: var(--font-size-lg);

  --font-size-heading-6: var(--font-size-sm);
  --font-size-heading-5: var(--font-size-base);
  --font-size-heading-4: var(--font-size-lg);
  --font-size-heading-3: var(--font-size-xl);
  --font-size-heading-2: var(--font-size-3xl);
  --font-size-heading-1: var(--font-size-5xl);
  --font-size-display: var(--font-size-6xl);

  /* line-height */
  --line-height-caption: 1rem;
  --line-height-meta: 1.25rem;
  --line-height-label: 1.25rem;
  --line-height-body: 1.5rem;
  --line-height-lead: 1.75rem;
  --line-height-heading-6: 1.25rem;
  --line-height-heading-5: 1.5rem;
  --line-height-heading-4: 1.5rem;
  --line-height-heading-3: 1.75rem;
  --line-height-heading-2: 2.25rem;
  --line-height-heading-1: 3.25rem;
  --line-height-display: 3.75rem;

  --size-max-width-container: 69rem; /* 1104px */
  --size-wide-width-container: 81rem; /* 1296px */
  --layout-header-height: 5.5rem; /* 88px */
  --size-action-plan-sidebar-expanded: 32rem; /* 512px */
  --size-action-plan-sidebar-collapsed: 6.25rem; /* 100px */

  /* Multiplos de 4px / 0.25rem) */
  --spacing-1: 0.25rem;  /* 4px */
  --spacing-2: 0.5rem;   /* 8px */
  --spacing-3: 0.75rem;  /* 12px */
  --spacing-4: 1rem;     /* 16px */
  --spacing-5: 1.25rem;  /* 20px */
  --spacing-6: 1.5rem;   /* 24px */
  --spacing-7: 1.75rem;  /* 28px */
  --spacing-8: 2rem;     /* 32px */
  --spacing-9: 2.25rem;  /* 36px */
  --spacing-10: 2.5rem;  /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem;    /* 48px */
  --spacing-14: 3.5rem;  /* 56px */
  --spacing-15: 3.75rem; /* 60px */
  --spacing-16: 4rem;    /* 64px */
  --spacing-18: 4.5rem;  /* 72px */
  --spacing-20: 5rem;    /* 80px */
  --spacing-22: 5.5rem;  /* 88px */
  --spacing-24: 6rem;    /* 96px */
  --spacing-26: 6.5rem;  /* 104px */
  --spacing-28: 7rem;    /* 112px */
  --spacing-30: 7.5rem;  /* 120px */
  --spacing-32: 8rem;    /* 128px */

  /* Tokens semanticos */
  --space-layout-gutter: var(--spacing-6);
  --space-layout-section-padding-y: var(--spacing-20);
  --space-layout-grid-gap: var(--spacing-6);
  --space-card-padding-x: var(--spacing-6);
  --space-card-padding-y: var(--spacing-6);
  --space-card-element-gap: var(--spacing-4);
  --space-control-gap: var(--spacing-2);
  --space-button-icon-gap-df: var(--spacing-1);

  /* Radius */
  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */

  --radius-control: var(--radius-md);
  --radius-card-compact: var(--radius-lg);
  --radius-icon: var(--radius-sm);

  --layout-container: var(--size-max-width-container);
  --layout-gutter: var(--space-layout-gutter);
}

@media (max-width: 720px) {
  :root {
    --layout-gutter: var(--spacing-4); /* 16px */
    --font-size-heading-1: var(--font-size-4xl);
    --font-size-heading-2: var(--font-size-2xl);
    --font-size-display: var(--font-size-5xl);
    --line-height-heading-1: 2.5rem;
    --line-height-heading-2: 2rem;
    --line-height-display: 3.25rem;
  }
}