/* ============================================================================
   JUSCALE — Design Tokens
   Arquitetura em 3 camadas: primitive → semantic → component
   (skill design-system-patterns). Versionar como API: mudança de valor
   semântico/component = minor; remoção/rename = major. Ver design_system.md.

   Versão: 1.0.0
   Tema padrão: light editorial (marfim + ink + brass).
   Tema escuro: [data-theme="dark"] (ink + brass — herança do deck de serviços).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CAMADA 1 — PRIMITIVES (valores crus, sem significado; nunca usar direto na UI)
   ---------------------------------------------------------------------------- */
:root {
  /* — Ink (neutro verde-petróleo, base da autoridade) — */
  --ink-950: #0B0F0D;
  --ink-900: #0E1311;
  --ink-800: #14201B;
  --ink-700: #1E2C25;
  --ink-600: #2C3D34;
  --ink-500: #45564D;
  --ink-400: #6B776F;
  --ink-300: #8C958B;
  --ink-200: #B4BBB3;
  --ink-100: #D4D8D1;

  /* — Cream (marfim/papel) — */
  --cream-50:  #FBF8F0;
  --cream-100: #F4EFE4;
  --cream-200: #ECE5D5;
  --cream-300: #DAD2BF;
  --cream-400: #CDC7B9;

  /* — Brass (ouro de autoridade, acento) — */
  --brass-200: #EFDCAE;
  --brass-300: #E7CE92;
  --brass-400: #D4B05E;
  --brass-500: #B0863C;
  --brass-600: #8C6A2E;
  --brass-700: #6B5022;

  /* — Oxblood (reservado: "vedado OAB", erro, alerta crítico) — */
  --oxblood-400: #B85249;
  --oxblood-500: #A24038;
  --oxblood-600: #7A2E2A;

  /* — Base — */
  --white: #FFFFFF;
  --black: #000000;

  /* — Espaçamento (base 4px @ root 16px) — */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* — Tipografia: famílias — */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Tipografia: escala — */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;   /* ~17px, corpo padrão */
  --text-md:   1.1875rem;
  --text-lg:   1.35rem;
  --text-xl:   1.6rem;
  --text-2xl:  2rem;
  --display-sm: clamp(1.9rem, 1.2rem + 2.6vw, 2.6rem);
  --display-md: clamp(2.4rem, 1.4rem + 4vw, 3.8rem);
  --display-lg: clamp(3rem, 1.6rem + 6vw, 5.6rem);

  /* — Tipografia: pesos / entrelinha / tracking — */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.04;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.24em;
  --tracking-widest: 0.34em;

  /* — Raios — */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 100px;

  /* — Movimento — */
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ----------------------------------------------------------------------------
   CAMADA 2 — SEMANTIC (significado contextual; é o que a UI consome)
   Tema LIGHT é o padrão (:root) e também re-aplicável via [data-theme="light"]
   (permite aninhar um bloco claro dentro de um escuro, ex.: card de form na band dark).
   ---------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --surface-base: var(--cream-100);
  --surface-raised: var(--cream-50);
  --surface-sunken: var(--cream-200);
  --surface-inverse: var(--ink-900);
  --surface-accent-soft: #F2E8CF;

  --text-strong: var(--ink-900);
  --text-default: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-400);
  --text-inverse: var(--cream-50);
  --text-on-accent: var(--ink-900);

  --accent: var(--brass-500);
  --accent-strong: var(--brass-600);
  --accent-soft: var(--brass-300);

  --border-subtle: rgba(20, 32, 27, 0.10);
  --border-default: rgba(20, 32, 27, 0.16);
  --border-strong: rgba(20, 32, 27, 0.30);
  --border-accent: rgba(176, 134, 60, 0.45);

  --state-allowed: var(--brass-600);   /* permitido pela OAB */
  --state-forbidden: var(--oxblood-500); /* vedado pela OAB */

  --focus-ring: rgba(176, 134, 60, 0.50);

  --shadow-sm: 0 1px 2px rgba(20, 32, 27, 0.06), 0 2px 8px -4px rgba(20, 32, 27, 0.10);
  --shadow-md: 0 12px 30px -18px rgba(20, 32, 27, 0.30);
  --shadow-lg: 0 30px 60px -30px rgba(20, 32, 27, 0.35);
  --shadow-accent: 0 12px 34px -14px rgba(176, 134, 60, 0.45);

  /* atmosfera de marca (grão + luz ambiente) */
  --grain-opacity: 0.035;
  --ambient-1: rgba(176, 134, 60, 0.10);
  --ambient-2: rgba(162, 64, 56, 0.05);

  color-scheme: light;
}

/* Tema DARK — herança do deck (ink + brass mais quente) */
[data-theme="dark"] {
  --surface-base: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-950);
  --surface-inverse: var(--cream-100);
  --surface-accent-soft: rgba(201, 162, 74, 0.08);

  --text-strong: var(--cream-50);
  --text-default: #F1EBDD;
  --text-muted: var(--ink-300);
  --text-subtle: #6B776F;
  --text-inverse: var(--ink-900);
  --text-on-accent: var(--ink-900);

  --accent: #C9A24A;            /* brass do deck, mais luminoso no escuro */
  --accent-strong: var(--brass-300);
  --accent-soft: var(--brass-700);

  --border-subtle: rgba(241, 235, 221, 0.06);
  --border-default: rgba(201, 162, 74, 0.16);
  --border-strong: rgba(201, 162, 74, 0.30);
  --border-accent: rgba(201, 162, 74, 0.45);

  --state-allowed: #C9A24A;
  --state-forbidden: var(--oxblood-400);

  --focus-ring: rgba(201, 162, 74, 0.55);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.60);
  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.70);
  --shadow-accent: 0 14px 40px -14px rgba(201, 162, 74, 0.40);

  --grain-opacity: 0.05;
  --ambient-1: rgba(201, 162, 74, 0.10);
  --ambient-2: rgba(162, 64, 56, 0.08);

  color-scheme: dark;
}

/* ----------------------------------------------------------------------------
   CAMADA 3 — COMPONENT (uso específico; referencia só a camada semantic)
   ---------------------------------------------------------------------------- */
:root {
  /* Botão primário */
  --button-primary-bg: var(--accent);
  --button-primary-bg-hover: var(--accent-strong);
  --button-primary-text: var(--text-on-accent);
  /* Botão fantasma */
  --button-ghost-border: var(--border-default);
  --button-ghost-border-hover: var(--border-accent);
  --button-ghost-text: var(--text-default);
  /* Botão: forma comum */
  --button-radius: var(--radius-pill);
  --button-pad-y: var(--space-3);
  --button-pad-x: var(--space-7);

  /* Card */
  --card-bg: var(--surface-raised);
  --card-border: var(--border-default);
  --card-border-hover: var(--border-accent);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-pad: var(--space-7);

  /* Chip / tag */
  --chip-border: var(--border-default);
  --chip-text: var(--text-muted);
  --chip-radius: var(--radius-pill);

  /* Input */
  --input-bg: var(--surface-base);
  --input-border: var(--border-default);
  --input-border-focus: var(--accent);
  --input-text: var(--text-default);
  --input-placeholder: var(--text-subtle);
  --input-radius: var(--radius-md);

  /* Eyebrow / kicker (mono uppercase) */
  --eyebrow-color: var(--accent);
  --eyebrow-tracking: var(--tracking-widest);

  /* Link inline */
  --link-color: var(--accent-strong);
  --link-underline: var(--border-accent);

  /* Régua / divisor decorativo */
  --rule-gradient: linear-gradient(90deg, var(--accent), transparent);
}