/* base.css — reset + tokens */

/* 1) Modern reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* 2) Tokens */
:root {
  /* [cole aqui as CSS variables da paleta] */
  /* Paleta inicial (substitua pelos valores oficiais quando disponíveis) */
  --color-bg: #0f0f10;
  --color-surface: #141518;
  --color-text: #f5f7fa;
  --color-muted: #a0a6b0;
  --color-primary: #5b8cff;
  --color-secondary: #ff6b6b;
  --color-accent: #00d4a6;

  --grad-primary: linear-gradient(135deg, #5b8cff 0%, #7a5cff 100%);
  --grad-secondary: linear-gradient(135deg, #ff8d6b 0%, #ff5b9f 100%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 6px 20px rgba(0,0,0,.14);

  --container-max: 1200px;
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-4: 32px;  
  --gap-5: 48px;

  --transition-fast: .15s ease;
  --transition: .25s ease;
  --transition-slow: .4s ease;
}

/* 3) Base typography with system font stack (no external libs) */
@supports (font-variation-settings: normal) {
  :root { --font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
}
@supports not (font-variation-settings: normal) {
  :root { --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }
}

html, body { height: 100%; }
body {
  font-family: 'ClashDisplay-Variable', 'ClashDisplay-Regular', 'ClashDisplay-Medium', 'Clash Display', var(--font-system);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* 4) Accessible focus states */
a, button, [tabindex] {
  transition: outline-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

/* 5) Sections baseline spacing */
.section { padding: var(--gap-5) 0; }

/* 6) Scroll progress bar baseline style; actual width updated via JS */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  background: var(--grad-primary);
  z-index: 9999;
}

/* FEMOPE palette overrides (modern lighter background) */
:root {
  --femope-magenta: #f33cac;
  --femope-fuchsia: #FF2DAA;
  --femope-purple:  #7A1FA2;
  --femope-pink:    #EE2674;
  --femope-coral:   #FF7A8A;
  --femope-dark:    #151661; /* azul-grafite */
  --femope-mid:     #334155;
  --femope-light:   #F8F6FA;
  --femope-white:   #FFFFFF;

  --grad-primary: linear-gradient(135deg, var(--femope-magenta), var(--femope-purple));
  --grad-secondary: linear-gradient(135deg, var(--femope-pink), var(--femope-purple));

  /* Map base tokens to palette for light theme */
  --color-bg: var(--femope-light);
  --color-surface: var(--femope-white);
  --color-text: var(--femope-dark);
  --color-muted: var(--femope-mid);
}