/* leoleles.com — tokens do design.
   Base: o sistema da casa (Architastik globals.css + mockup do LeOS Deck): três camadas.
   Camada 1 = primitivos (nunca mudam por tema). Camada 2 = semânticos e ação (o tema mexe aqui).
   O login/landing vive no «cosmos» (céu profundo); o interior do app vive na casa (claro por padrão, escuro como seam).
   A estrela dourada é a marca do portal — acento de identidade, não de ação. */

/* ------------------------------------------------ camada 1: primitivos */
:root {
  --white: #ffffff;
  --off-white: #f9f9f9;
  --gray-1: #f5f5f5;
  --gray-1-5: #f0f0f0;
  --medium-gray: #dfdfdf;
  --gray-2: #cbcbcb;
  --gray-3: #999999;
  --gray-4: #555555;
  --gray-5: #3d3d3d;
  --gray-6: #2c2c2c;
  --gray-7: #212121;
  --black: #1c1c1c;
  --ink: #171921;

  /* rampa teal (dado / foco / seleção — nunca ação) */
  --fill-1: #54a6be;  --fill-1-fg: #2d7a8e;
  --fill-2: #69b5b8;
  --fill-3: #7ec4b1;
  --fill-4: #98d1ac;
  --fill-5: #b0dda7;
  --fill-0: #ddf1fa;

  /* status: pastel + texto escuro (AA sobre branco e gray-1) */
  --success: #98d1ac;     --success-fg: #37694d;
  --error: #ee8787;       --error-fg: #b84040;
  --paused: #ede09a;      --paused-fg: #76641f;
  --in-progress: #a5daf9; --in-progress-fg: #1e5c8a;
  --cancelled: #deb2b2;   --cancelled-fg: #7a4a4a;
  --danger-solid: #b84040; --danger-solid-hover: #a53838;

  /* o amarelo do Leo (identidade visual Sunbury / JDI): acento de identidade, não de ação */
  --yellow: #FFD43B;
  --amber: #F5A623;
  --yellow-pale: #FFF3C4;
  --yellow-ink: #7A5A00;      /* «amarelo» legível como texto sobre fundo claro */
  --yellow-on: #231F20;       /* texto sobre amarelo (JDI Black) */
  --orange: #e8894a;

  /* cosmos (login / landing) e a marca */
  --ceu: #0B0A12;
  --ceu-2: #14121F;
  --ceu-3: #1D1A2B;
  --nebulosa: #6E48D6;
  --nebulosa-2: #C2517B;
  --estrela: var(--yellow);
  --estrela-ink: var(--yellow-on);

  /* tipografia da casa */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, Consolas, monospace;

  /* raios, movimento, ritmo */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --duration-fast: 120ms;
  --duration-base: 150ms;
  --duration-slow: 200ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --u: 4px;
  --space-page-x: 1.5rem;
  --space-section-y: 2rem;
  --space-card-pad: 1rem;
  --space-stack: .75rem;
}

/* ------------------------------------------------ camada 2: semânticos + ação (tema claro = padrão) */
:root {
  --background: var(--off-white);
  --surface: var(--white);
  --surface-2: var(--gray-1);          /* inset: inputs, chips, trilhas */
  --surface-inverse: var(--black);
  --border: var(--medium-gray);
  --border-soft: var(--gray-1-5);
  --border-strong: var(--gray-2);
  --text-primary: var(--black);
  --text-secondary: var(--gray-4);
  --text-muted: var(--gray-3);
  --text-on-inverse: var(--white);
  --accent: var(--yellow);            /* identidade: sublinhados, marcadores, destaques, seleção */
  --accent-fg: var(--yellow-ink);
  --accent-pale: var(--yellow-pale);
  --dado: var(--fill-1);              /* teal: gráficos, indicadores, informação */
  --dado-fg: var(--fill-1-fg);
  --link: var(--fill-1-fg);
  --focus-ring-color: var(--amber);
  --backdrop: color-mix(in srgb, var(--black) 48%, transparent);

  --action-primary-bg: var(--surface-inverse);
  --action-primary-bg-hover: var(--gray-6);
  --action-primary-fg: var(--text-on-inverse);
  --action-secondary-fg: var(--text-primary);
  --action-secondary-border: var(--gray-2);
  --action-secondary-bg-hover: var(--gray-1);
  --action-ghost-fg: var(--gray-4);
  --action-ghost-fg-hover: var(--black);
  --action-ghost-bg-hover: var(--gray-1);
  --action-danger-bg: var(--danger-solid);
  --action-danger-bg-hover: var(--danger-solid-hover);
  --action-danger-fg: var(--white);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .02);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-input-inset: inset 0 2px 2px -1px rgba(74, 74, 104, .10);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--focus-ring-color) 14%, transparent);
  --shadow-focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring-color);
}

/* seam escuro — só a camada 2 muda */
:root[data-theme="dark"] {
  --background: var(--gray-7);
  --surface: var(--gray-6);
  --surface-2: var(--gray-5);
  --surface-inverse: var(--off-white);
  --border: var(--gray-5);
  --border-soft: var(--gray-5);
  --border-strong: var(--gray-4);
  --text-primary: var(--gray-1);
  --text-secondary: var(--gray-2);
  --text-muted: var(--gray-3);
  --text-on-inverse: var(--black);
  --action-primary-bg-hover: var(--gray-1-5);
  --action-secondary-border: var(--gray-4);
  --action-secondary-bg-hover: var(--gray-5);
  --action-ghost-fg: var(--gray-2);
  --action-ghost-fg-hover: var(--gray-1);
  --action-ghost-bg-hover: var(--gray-5);
  --backdrop: color-mix(in srgb, #000 64%, transparent);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .3);
  --yellow-pale: #3A3117;
  --yellow-ink: #FFE38A;
  --accent-fg: var(--yellow-ink);
  --accent-pale: var(--yellow-pale);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: var(--gray-7);
    --surface: var(--gray-6);
    --surface-2: var(--gray-5);
    --surface-inverse: var(--off-white);
    --border: var(--gray-5);
    --border-soft: var(--gray-5);
    --border-strong: var(--gray-4);
    --text-primary: var(--gray-1);
    --text-secondary: var(--gray-2);
    --text-muted: var(--gray-3);
    --text-on-inverse: var(--black);
    --action-primary-bg-hover: var(--gray-1-5);
    --action-secondary-border: var(--gray-4);
    --action-secondary-bg-hover: var(--gray-5);
    --action-ghost-fg: var(--gray-2);
    --action-ghost-fg-hover: var(--gray-1);
    --action-ghost-bg-hover: var(--gray-5);
    --backdrop: color-mix(in srgb, #000 64%, transparent);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .3);
    --yellow-pale: #3A3117;
    --yellow-ink: #FFE38A;
    --accent-fg: var(--yellow-ink);
    --accent-pale: var(--yellow-pale);
  }
}

/* ------------------------------------------------ aliases de transição (nomes antigos do portal → casa)
   Mantêm as páginas atuais de pé enquanto migram para os nomes semânticos acima. */
:root {
  --luz: var(--text-primary);
  --luz-2: var(--text-secondary);
  --luz-3: var(--text-muted);
  --luz-4: var(--gray-3);
  --linha: var(--border-soft);
  --linha-2: var(--border);
  --foco: color-mix(in srgb, var(--focus-ring-color) 30%, transparent);
  --bom: var(--success-fg);
  --bom-fundo: color-mix(in srgb, var(--success) 60%, transparent);
  --alerta: var(--error-fg);
  --alerta-fundo: color-mix(in srgb, var(--error) 40%, transparent);
  --display: var(--font-display);
  --corpo: var(--font-body);
  --mono: var(--font-mono);
  --raio-s: var(--radius-md);
  --raio-m: var(--radius-lg);
  --raio-g: var(--radius-xl);
  --sombra-cartao: var(--shadow-card);
}