/* Tokens do Hub HOM — espelham as variáveis do arquivo Figma (Cor, Medidas, Motion) */
:root {
  color-scheme: light dark;

  /* cor — modo claro */
  --bg-page: #FAF7F0;
  --bg-card: #F1ECE1;
  --bg-card-hover: #ECE4D2;
  --bg-surface: #FFFFFF;
  --text-primary: #1C1A15;
  --text-muted: #6B6455;
  --text-inverse: #FFFFFF;
  --text-gold: #8A6D1A;
  --border-default: #DED7C7;
  --border-strong: #BDB39B;
  --frente-embaixadores: #84ABAA;
  --frente-criadores: #E77A77;
  --frente-mvm: #C9A227;
  --frente-representantes: #F9DF94;
  --frente-time: #512B52;
  --text-on-frente: #1C1A15;
  --text-on-time: #FFFFFF;
  --accent-gold: #C9A227;
  --status-success: #2F6F4E;
  --status-success-bg: #E3F1E8;
  --status-warning: #8A5A0B;
  --status-warning-bg: #FBEFD5;
  --status-danger: #A3362A;
  --status-danger-bg: #FBE3DF;
  --status-info: #2B5F8A;
  --status-info-bg: #E1EDF7;
  --focus-ring: #2B5F8A;
  --shadow-card: 0 1px 2px rgba(28, 26, 20, .06), 0 4px 16px rgba(28, 26, 20, .06);
  --shadow-raised: 0 2px 4px rgba(28, 26, 20, .08), 0 12px 32px rgba(28, 26, 20, .12);
  --shadow-panel: 0 4px 8px rgba(28, 26, 20, .06), 0 24px 48px rgba(28, 26, 20, .14);

  /* medidas */
  --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;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px;
  --size-touch: 44px;
  --layout-sidebar: 264px;
  --layout-content-max: 1200px;

  /* tipografia */
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --body: 'Source Sans 3', -apple-system, 'SF Pro Text', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --accent-font: 'Figtree', -apple-system, 'SF Pro Display', system-ui, sans-serif;

  /* motion */
  --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-chart: 800ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring-soft: cubic-bezier(.34, 1.3, .64, 1);
  --spring-snappy: cubic-bezier(.2, .9, .3, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-soft: linear(0, .17 6%, .55 14%, .84 23%, 1.01 33%, 1.045 42%, 1.03 52%, 1.01 65%, 1);
    --spring-snappy: linear(0, .5 8%, .86 17%, 1.01 28%, 1.01 40%, 1);
  }
}

/* modo escuro: segue o sistema (macOS) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg-page: #17150F; --bg-card: #231F18; --bg-card-hover: #2C271E; --bg-surface: #1E1B15;
    --text-primary: #F3EEE2; --text-muted: #A89F8C; --text-inverse: #1C1A15; --text-gold: #E3C45A;
    --border-default: #3A352B; --border-strong: #5A5242;
    --frente-time: #A878AB; --text-on-time: #1C1A15;
    --status-success: #6FC49A; --status-success-bg: #1F3A2C; --status-warning: #E8B04E; --status-warning-bg: #3D2F14;
    --status-danger: #F08A7C; --status-danger-bg: #40201C; --status-info: #7FB2DE; --status-info-bg: #1D3042;
    --focus-ring: #7FB2DE;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
    --shadow-panel: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 48px rgba(0, 0, 0, .55);
  }
}
:root[data-tema="escuro"] {
  --bg-page: #17150F; --bg-card: #231F18; --bg-card-hover: #2C271E; --bg-surface: #1E1B15;
  --text-primary: #F3EEE2; --text-muted: #A89F8C; --text-inverse: #1C1A15; --text-gold: #E3C45A;
  --border-default: #3A352B; --border-strong: #5A5242;
  --frente-time: #A878AB; --text-on-time: #1C1A15;
  --status-success: #6FC49A; --status-success-bg: #1F3A2C; --status-warning: #E8B04E; --status-warning-bg: #3D2F14;
  --status-danger: #F08A7C; --status-danger-bg: #40201C; --status-info: #7FB2DE; --status-info-bg: #1D3042;
  --focus-ring: #7FB2DE;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-panel: 0 4px 8px rgba(0, 0, 0, .4), 0 24px 48px rgba(0, 0, 0, .55);
}