/* ============================================================================
   Jericó Design System — Design Tokens
   Fonte única de verdade visual: nenhum outro arquivo CSS pode fixar cor,
   espaçamento, raio, sombra ou duração — sempre consumir var(--jr-*).
   Portado do design system do projeto anterior (OLD/web/src/theme/tokens.css).
   ========================================================================== */

:root {
  /* ---- Tipografia -------------------------------------------------------- */
  --jr-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --jr-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --jr-font-size-headline-lg: 2rem;
  --jr-font-size-headline-md: 1.375rem;
  --jr-font-size-title-md: 1rem;
  --jr-font-size-body-md: 0.9375rem;
  --jr-font-size-body-sm: 0.8125rem;
  --jr-font-size-label-sm: 0.75rem;
  --jr-letter-spacing-label-sm: 0.06em;

  /* ---- Raios ------------------------------------------------------------- */
  --jr-radius-xs: 4px;
  --jr-radius-sm: 8px;
  --jr-radius-md: 12px;
  --jr-radius-full: 999px;
  --jr-radius-card: 14px;

  /* ---- Espaçamento (grade 8pt: 4, 8, 12, 16, 24, 32, 48) ------------------ */
  --jr-space-xs: 4px;
  --jr-space-sm: 8px;
  --jr-space-12: 12px;
  --jr-space-md: 16px;
  --jr-space-lg: 24px;
  --jr-space-xl: 32px;
  --jr-space-xxl: 48px;

  /* ---- Elevação ----------------------------------------------------------- */
  --jr-elevation-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --jr-elevation-md: 0 8px 20px rgba(0, 0, 0, 0.12);

  /* ---- Movimento ---------------------------------------------------------- */
  --jr-duration-fast: 120ms;
  --jr-duration-base: 180ms;
  --jr-duration-slow: 260ms;
  --jr-easing-standard: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Geometria do shell -------------------------------------------------- */
  --jr-sidebar-width: 220px;
  --jr-control-height: 44px;
  --jr-chip-height: 24px;
}

/* ============================================================================
   Cores — Light (padrão)
   ========================================================================== */
:root,
:root[data-theme="light"] {
  --jr-color-background: #fffbf9;
  --jr-color-surface: #fcf7f5;
  --jr-color-elevated: #f6f1ef;
  --jr-color-border: #d1cdcc;
  --jr-color-border-strong: #beb7b4;

  --jr-color-on-surface: #250000;
  --jr-color-on-surface-muted: #6d5d57;
  --jr-color-on-surface-faint: #9b8e88;

  --jr-color-primary: #ff691d;
  --jr-color-primary-hover: #db4700;
  --jr-color-primary-pressed: #b43c00;
  --jr-color-on-primary: #ffffff;

  --jr-color-secondary: #41709f;
  --jr-color-secondary-hover: #5484b4;
  --jr-color-on-secondary: #ffffff;

  --jr-color-accent: #2d6aae;

  --jr-color-success: #00a320;
  --jr-color-warning: #f2b321;
  --jr-color-info: #268ae0;
  --jr-color-error: #d12739;

  --jr-color-chip-bg: rgba(255, 105, 29, 0.12);
  --jr-elevation-focus: 0 0 0 3px rgba(255, 105, 29, 0.25);

  --jr-divider: #eaeaea;

  /* Tons suaves para pills/badges (o texto sempre acompanha a cor). */
  --jr-tint-success: rgba(0, 163, 32, 0.12);
  --jr-tint-warning: rgba(242, 179, 33, 0.16);
  --jr-tint-info: rgba(38, 138, 224, 0.12);
  --jr-tint-error: rgba(209, 39, 57, 0.12);
}

/* ============================================================================
   Cores — Dark
   Aplicado via [data-theme="dark"] (escolha explícita) ou preferência do SO.
   ========================================================================== */
:root[data-theme="dark"] {
  --jr-color-background: #14100e;
  --jr-color-surface: #1d1815;
  --jr-color-elevated: #2a221d;
  --jr-color-border: #403732;
  --jr-color-border-strong: #584c46;

  --jr-color-on-surface: #fff8f5;
  --jr-color-on-surface-muted: #c5b8b1;
  --jr-color-on-surface-faint: #8a7b73;

  --jr-color-primary: #ff7b3a;
  --jr-color-primary-hover: #ff925e;
  --jr-color-primary-pressed: #d95f21;
  --jr-color-on-primary: #ffffff;

  --jr-color-secondary: #5e9be3;
  --jr-color-secondary-hover: #7ab4f0;
  --jr-color-on-secondary: #ffffff;

  --jr-color-accent: #4e8dd2;

  --jr-color-success: #3cc95c;
  --jr-color-warning: #f7c547;
  --jr-color-info: #58afff;
  --jr-color-error: #f04a5d;

  --jr-color-chip-bg: rgba(255, 123, 58, 0.16);
  --jr-elevation-focus: 0 0 0 3px rgba(255, 123, 58, 0.3);

  --jr-divider: var(--jr-color-border);

  --jr-tint-success: rgba(60, 201, 92, 0.16);
  --jr-tint-warning: rgba(247, 197, 71, 0.18);
  --jr-tint-info: rgba(88, 175, 255, 0.16);
  --jr-tint-error: rgba(240, 74, 93, 0.16);
}

/* Dark automático quando o usuário não fez escolha explícita. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --jr-color-background: #14100e;
    --jr-color-surface: #1d1815;
    --jr-color-elevated: #2a221d;
    --jr-color-border: #403732;
    --jr-color-border-strong: #584c46;

    --jr-color-on-surface: #fff8f5;
    --jr-color-on-surface-muted: #c5b8b1;
    --jr-color-on-surface-faint: #8a7b73;

    --jr-color-primary: #ff7b3a;
    --jr-color-primary-hover: #ff925e;
    --jr-color-primary-pressed: #d95f21;
    --jr-color-on-primary: #ffffff;

    --jr-color-secondary: #5e9be3;
    --jr-color-secondary-hover: #7ab4f0;
    --jr-color-on-secondary: #ffffff;

    --jr-color-accent: #4e8dd2;

    --jr-color-success: #3cc95c;
    --jr-color-warning: #f7c547;
    --jr-color-info: #58afff;
    --jr-color-error: #f04a5d;

    --jr-color-chip-bg: rgba(255, 123, 58, 0.16);
    --jr-elevation-focus: 0 0 0 3px rgba(255, 123, 58, 0.3);

    --jr-divider: var(--jr-color-border);

    --jr-tint-success: rgba(60, 201, 92, 0.16);
    --jr-tint-warning: rgba(247, 197, 71, 0.18);
    --jr-tint-info: rgba(88, 175, 255, 0.16);
    --jr-tint-error: rgba(240, 74, 93, 0.16);
  }
}

/* Respeita a preferência global por menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --jr-duration-fast: 0ms;
    --jr-duration-base: 0ms;
    --jr-duration-slow: 0ms;
  }
}