/*
  Tokens traduzidos de DESIGN.md (sistema Apple, site de e-commerce) para um
  app utilitário de dashboard. Cores, tipografia, raios e o princípio de
  "sombra só em produto" foram mantidos; a paleta de status (em-dia,
  proxima, atencao, atrasada) é uma EXTENSÃO — o guia original não define
  cores semânticas de dado, então segue o mesmo tom Apple/HIG.
*/

:root {
  color-scheme: light;

  /* Cor — marca e ação */
  --color-primary: #0066cc;
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;

  /* Cor — superfícies */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7;
  --color-surface-pearl: #fafafc;
  --color-surface-black: #000000;
  --color-surface-tile-1: #272729;

  /* Cor — texto */
  --color-ink: #1d1d1f;
  --color-body-on-dark: #ffffff;
  --color-body-muted: #cccccc;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;

  /* Cor — hairlines */
  --color-hairline: #e0e0e0;
  --color-divider-soft: #f0f0f0;

  /* Cor — status (extensão sobre o design system) */
  --status-em-dia: #34c759;
  --status-proxima: #0066cc;
  --status-atencao: #ff9500;
  --status-atrasada: #ff3b30;
  --status-indefinido: #8e8e93;

  /* Raio */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* Espaçamento */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Tipografia — SF Pro com fallback Inter (nota do DESIGN.md) */
  --font-display: "SF Pro Display", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: "SF Pro Text", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Sombra — reservada a um único uso (ver Do's/Don'ts do DESIGN.md) */
  --shadow-product: 3px 5px 30px rgba(0, 0, 0, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #1c1c1e;
    --color-canvas-parchment: #000000;
    --color-surface-pearl: #2c2c2e;
    --color-ink: #f5f5f7;
    --color-ink-muted-80: #d1d1d6;
    --color-ink-muted-48: #8e8e93;
    --color-hairline: #38383a;
    --color-divider-soft: #2c2c2e;
  }
}

/* Escolha manual do usuário (Perfil > Aparência) vence a preferência do sistema nos dois sentidos. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #1c1c1e;
  --color-canvas-parchment: #000000;
  --color-surface-pearl: #2c2c2e;
  --color-ink: #f5f5f7;
  --color-ink-muted-80: #d1d1d6;
  --color-ink-muted-48: #8e8e93;
  --color-hairline: #38383a;
  --color-divider-soft: #2c2c2e;
}

:root[data-theme="light"] {
  color-scheme: light;
}