/*
 * Design tokens — derivados do logo oficial (assets/img/logo-source.png).
 *
 * As três cores da marca foram amostradas do próprio arquivo, não escolhidas
 * de olho:
 *
 *   #143965  azul-marinho das figuras e do wordmark
 *   #497f72  verde-jade da figura maior
 *   #769681  verde-sálvia da folha
 *
 * Os mesmos valores estão em mobile/hagukumi-mobile/lib/core/theme/app_colors.dart.
 * Ao mudar uma cor de marca aqui, mude lá também: são as duas pontas de uma
 * identidade só.
 */

:root {
  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --brand-navy: #143965;
  --brand-navy-deep: #0a2e55;
  --brand-navy-bright: #1f5a96;
  --brand-jade: #497f72;
  --brand-jade-bright: #5f9d8d;
  --brand-sage: #769681;
  --brand-sage-light: #a8c4ae;
  /* Tinta clara da sálvia, para bordas e fundos de apoio. */
  --brand-mist: #dbe7de;

  /*
   * O gradiente percorre o logo na diagonal em que ele é lido: marinho da
   * figura da frente, jade da figura de trás, sálvia da folha. Uma vez por
   * seção, no máximo.
   */
  --gradient-signature: linear-gradient(135deg, #143965 0%, #3f7a72 52%, #769681 100%);
  /* Mesma diagonal, clareada: só para texto e detalhe sobre fundo escuro. */
  --gradient-signature-light: linear-gradient(135deg, #7fc3ac 0%, #a8c4ae 100%);
  --gradient-jade: linear-gradient(135deg, #497f72 0%, #a8c4ae 100%);
  --gradient-navy: linear-gradient(135deg, #0a2e55 0%, #1f5a96 100%);
  --gradient-sage-veil: linear-gradient(135deg, #eef4f0 0%, #dbe7de 100%);

  /* ── Neutros claros ────────────────────────────────────────────────────── */
  /* Nenhum cinza puro: todo neutro puxa para o azul-esverdeado da marca. */
  --ink: #10202f;
  --ink-muted: #566a7b;
  --ink-faint: #8b9daa;
  --surface: #ffffff;
  --surface-subtle: #f7fbf9;
  --surface-sunken: #eef4f2;
  --outline: #dfe8e6;

  /* ── Neutros escuros ───────────────────────────────────────────────────── */
  /* O escuro é marinho profundo, não preto: preto mata o azul do logo. */
  --dark-bg: #08172a;
  --dark-surface: #0e2136;
  --dark-surface-elevated: #16304a;
  --dark-outline: #1e3c58;
  --dark-ink: #eaf2f6;
  --dark-ink-muted: #9db2c2;

  --jade-on-dark: #79b7a5;
  --sage-on-dark: #a8c4ae;
  --navy-on-dark: #7aacdf;

  /* ── Semânticos ────────────────────────────────────────────────────────── */
  /* Afastados do jade da marca, senão "sucesso" e "identidade" se confundem. */
  --success: #2f9e6a;
  --warning: #d98b2b;
  --danger: #cf4b52;
  --info: #3d78b8;

  /* ── Níveis JLPT ───────────────────────────────────────────────────────── */
  --level-n5: #2f9e6a;
  --level-n4: #3d78b8;
  --level-n3: #d98b2b;
  --level-n2: #cf6a45;
  --level-n1: #a5364a;

  /* ── Raios ─────────────────────────────────────────────────────────────── */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── Espaçamento ───────────────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 72px;
  --space-5xl: 112px;

  /* ── Sombras ───────────────────────────────────────────────────────────── */
  /* Tingidas de marinho, não de preto: cinza puro suja esta paleta. */
  --shadow-soft: 0 8px 24px rgba(16, 44, 74, 0.08);
  --shadow-lifted: 0 14px 34px rgba(16, 44, 74, 0.13);
  --shadow-glow: 0 12px 28px rgba(20, 57, 101, 0.26);
  --shadow-dark: 0 10px 30px rgba(3, 11, 22, 0.45);

  /* ── Tipografia ────────────────────────────────────────────────────────── */
  /*
   * O navegador resolve japonês pela ordem da pilha: latim e números saem de
   * Plus Jakarta Sans (geométrica, próxima do wordmark do logo), kana e kanji
   * da fonte japonesa seguinte.
   *
   * Display usa Zen Kaku Gothic New: gótica geométrica de traço reto, no tom
   * institucional do logo novo. Corpo usa Noto Sans JP, mais neutra em
   * parágrafo longo.
   */
  --font-display: "Plus Jakarta Sans", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  --leading-tight: 1.25;
  --leading-snug: 1.45;
  --leading-loose: 1.9;

  /* ── Movimento ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 520ms;

  /* ── Bootstrap: só o necessário para os componentes nativos ────────────── */
  --bs-primary: #143965;
  --bs-primary-rgb: 20, 57, 101;
  --bs-body-color: #10202f;
  --bs-body-bg: #ffffff;
  --bs-border-color: #dfe8e6;
  --bs-link-color: #1f5a96;
  --bs-link-hover-color: #143965;
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
}