/* XeloX Design System — tokens
 * Fonte de verdade: DESIGN-SYSTEM.md (extraído do código real do app iOS).
 * Regra de ouro: novos componentes usam tokens daqui — nunca valores soltos. */

:root {
  /* ── Paleta de alertas (escolhível pelo usuário; pastel, texto branco no ícone) ── */
  --alert-blue: #89CFF0;   /* Baby blue — default de alerta novo */
  --alert-pink: #F4C2C2;   /* Baby pink */
  --alert-mint: #B2FCE4;   /* Mint */
  --alert-yellow: #FDFD96; /* Pastel yellow */
  --alert-orange: #FFB347; /* Pastel orange */
  --alert-red: #FF6961;    /* Pastel red */
  --alert-purple: #CB99C9; /* Pastel purple */
  --alert-green: #77DD77;  /* Pastel green */
  --alert-steel: #99BADD;  /* Carolina blue */
  --alert-rose: #F5A9B8;   /* Rose */

  /* ── Cores semânticas de estado (fixas — NÃO personalizáveis) ──
   * Nunca aparecem sozinhas: sempre com ícone e/ou texto (daltonismo). */
  --state-done: #34C759;        /* concluído / resolvido na primeira */
  --state-snooze: #FF9500;      /* adiado / hoje / countdown em atenção */
  --state-missed: #FF3B30;      /* perdido / vencido — sempre com texto */
  --state-external: #007AFF;    /* badge "external" (reuniões) */
  --state-rule: #AF52DE;        /* badge "rule" */
  --state-tag: #FF9500;         /* badge custom de regra ("Tag as") */
  --state-appointment: #34C759; /* badge "appointment" */
  --brand-meeting: #2E3787;     /* índigo dos alertas de reunião */
  --timesense-alarm: #DB2929;   /* vermelho do "TIME'S UP!" */

  /* ── Relógio de horas coloridas (Time Sense, 24 tons: madrugada→noite) ── */
  --hour-00: #222774; --hour-01: #222774; --hour-02: #2E3787; --hour-03: #364092;
  --hour-04: #3E4A9C; --hour-05: #4451A5; --hour-06: #5F6ABA; --hour-07: #5EA3F0;
  --hour-08: #5AB4F0; --hour-09: #61C3D8; --hour-10: #52A39A; --hour-11: #7BB872;
  --hour-12: #FDEF72; --hour-13: #F7DA5A; --hour-14: #F2C34F; --hour-15: #EDAC46;
  --hour-16: #EF9535; --hour-17: #DF752C; --hour-18: #C94F2A; --hour-19: #B73831;
  --hour-20: #A92F26; --hour-21: #7D1D4D; --hour-22: #441887; --hour-23: #2E1C8C;

  /* ── Neutros (equivalentes web das cores dinâmicas iOS; dark mode abaixo) ── */
  --text-primary: #000000;                 /* Color.primary */
  --text-secondary: rgba(60, 60, 67, 0.6); /* Color.secondary */
  --bg-grouped: #F2F2F7;                   /* systemGroupedBackground */
  --bg-secondary: #F2F2F7;                 /* secondarySystemBackground */
  --bg-elevated: #FFFFFF;                  /* célula/card sobre bg-grouped */
  --fill-tertiary: rgba(118, 118, 128, 0.12); /* tertiarySystemFill */

  /* ── Forma (radius) ── */
  --radius-card: 16px;    /* cards AGORA / countdown */
  --radius-panel: 10px;   /* painéis de detalhe, ícones quadrados (10–12) */
  --radius-badge: 4px;
  --radius-button: 999px; /* Capsule — botões de alarme */

  /* ── Espaçamento e medidas ── */
  --space-card-pad: 14px;   /* padding interno de card (14–16) */
  --space-row-gap: 12px;    /* HStack de linha */
  --space-inline-gap: 6px;  /* ícone↔texto, badges entre si (6–8) */
  --space-screen-h: 32px;   /* margem horizontal de telas de alarme */
  --icon-circle: 36px;      /* ícone circular padrão */
  --icon-circle-history: 32px;
  --icon-circle-la: 44px;   /* Live Activity */
  --border-card: 1.5px;     /* borda do card AGORA na cor do estado */

  /* ── Opacidades canônicas ── */
  --op-bg-tint: 0.12;          /* fundo de card na cor do alerta */
  --op-badge-bg: 0.2;          /* fundo de badge na cor semântica (0.18–0.20) */
  --op-alarm-bg: 0.92;         /* cor cheia da tela de alarme */
  --op-alarm-icon-ghost: 0.1;  /* ícone gigante de fundo (0.05–0.15) */
  --op-white-secondary: 0.8;   /* texto secundário sobre cor (0.75–0.85) */
  --op-white-tertiary: 0.65;   /* metadados sobre cor (0.6–0.7) */
  --op-disabled: 0.55;         /* linha/card desabilitado (0.5–0.55) */
  --op-button-ghost: 0.2;      /* botão secundário sobre cor (0.1 pressed) */
  --op-button-solid: 0.9;      /* botão primário branco sobre cor (0.7 pressed) */

  /* ── Tipografia (SF Pro via pilha de sistema; nunca fonte customizada) ── */
  --font-ui: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono-digits: "SF Mono", ui-monospace, monospace;

  /* Escala (equivalentes px dos estilos iOS; números vivos SEMPRE em
   * monospaced — use --font-mono-digits ou font-variant-numeric: tabular-nums) */
  --type-display-timer: 700 72px/1 var(--font-mono-digits);  /* mostrador Time Sense */
  --type-display-alarm: 700 40px/1.1 var(--font-ui);         /* título tela de alarme (min scale 0.5) */
  --type-display-meeting: 700 46px/1.1 var(--font-ui);       /* título alerta de reunião (46→40) */
  --type-shout: 900 44px/1 var(--font-ui);                   /* "TIME'S UP!" */
  --type-countdown-card: 700 30px/1 var(--font-mono-digits); /* card Countdown Board */
  --type-countdown-inline: 700 20px/1 var(--font-mono-digits); /* countdown no card AGORA (title3) */
  --type-title-screen: 700 22px/1.2 var(--font-ui);          /* headers de tela (title2) */
  --type-row-title: 600 17px/1.3 var(--font-ui);             /* título de linha/card (headline) */
  --type-row-meta: 400 12px/1.3 var(--font-mono-digits);     /* data/hora secundária (caption mono) */
  --type-badge: 400 11px/1.2 var(--font-ui);                 /* badges (caption2; bold p/ crítico) */
  --type-button-alarm: 600 20px/1.2 var(--font-ui);          /* botões da tela de alarme */
  --type-display-clock: 700 44px/1 var(--font-mono-digits);  /* relógio vivo do header (macOS, XeloxDayverse) */

  /* ── Medidas de componente (adicionadas 2026-10-13 para o XeloxDayverse/macOS) ── */
  --border-hairline: 1px;   /* borda neutra de card (elevação plana) */
  --op-hairline: 0.08;      /* opacidade da borda neutra sobre --text-primary */
  --dot-status: 10px;       /* bolinha de status (já citada na "Linha padrão") */
  --ring-size: 132px;       /* anel do dia (Dashboard) */
  --ring-stroke: 12px;      /* espessura do anel do dia */
  --touch-min: 44px;        /* alvo mínimo clicável/tocável */
  --space-badge-y: 2px;     /* padding vertical do badge (spec "6×2"; horizontal = --space-inline-gap) */

  /* ── Layout macOS (janela, colunas, leitura) ── */
  --layout-window-min-w: 1100px;
  --layout-window-min-h: 700px;
  --layout-sidebar-min: 210px;
  --layout-list-min: 360px;
  --layout-detail-min: 440px;
  --layout-reading-max: 760px; /* largura máxima de texto longo (leitor de markdown) */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Só os neutros mudam; paleta de alertas e semântica são fixas. */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --bg-grouped: #000000;
    --bg-secondary: #1C1C1E;
    --bg-elevated: #1C1C1E;
    --fill-tertiary: rgba(118, 118, 128, 0.24);
  }
}