/* ==========================================================================
   JL Certificado Digital — Design System v2.1
   01. tokens.css — camada de decisão (única fonte de verdade)

   Marca: azul marinho escuro, prata e branco. SEMPRE estas três.
   Valores lidos da arte oficial por amostragem de pixel:
     marinho  #0B0F4A   (JL-Certificado-digital---Azul.png)
     prata    #DADADA   (JL-Certificado-digital -Prata.png) — cinza neutro puro
   As rampas foram derivadas desses dois em HSL, mantendo o matiz 236°.

   Simetria dos temas: as duas versões do logo são os dois temas.
     claro  = marinho sobre branco   (logo azul)
     escuro = prata sobre marinho    (logo prata)

   Ordem das camadas:
     primitivos  -> valores crus, sem significado ("navy-700")
     semânticos  -> valores com função ("--surface", "--action")
   Sempre construa componente contra o semântico.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVOS — COR
   -------------------------------------------------------------------------- */
:root {
  /* --- AZUL MARINHO — matiz 236°, saturação 74% ---------------------------
     navy-700 é o valor exato do logo. Não altere; a rampa depende dele.
     ---------------------------------------------------------------------- */
  --jl-navy-900: #060828; /* fundo do tema escuro */
  --jl-navy-800: #090c3a;
  --jl-navy-700: #0b0f4a; /* MARCA — 17,9:1 sobre branco */
  --jl-navy-600: #0f1462;
  --jl-navy-500: #141b85; /* link, foco — 13,8:1 sobre branco */
  --jl-navy-400: #1c26ba;
  --jl-navy-300: #838aec; /* link e foco no tema escuro — 6,4:1 sobre 900 */
  --jl-navy-200: #b8bcf5;
  --jl-navy-100: #dcddfa;
  --jl-navy-050: #edeffc;

  /* --- PRATA --------------------------------------------------------------
     silver-200 é o valor exato do logo: cinza NEUTRO, sem viés de matiz.
     Os degraus vizinhos levam 6% de saturação em 236° para conviverem com o
     marinho sem parecerem cinza de sistema. Prata é superfície, traço e — no
     tema escuro — a própria tinta. Acima de 500 não é cor de texto sobre branco.
     ---------------------------------------------------------------------- */
  --jl-silver-050: #f7f7f8;
  --jl-silver-100: #efeff1;
  --jl-silver-200: #dadada; /* MARCA — logo prata */
  --jl-silver-300: #c4c4ca;
  --jl-silver-400: #a9a9b2;
  --jl-silver-500: #8b8c98; /* 3,3:1 — só texto grande / decorativo */
  --jl-silver-600: #6c6d7a; /* texto secundário — 5,1:1 sobre branco */
  --jl-silver-700: #52525c;

  /* --- BRANCO ------------------------------------------------------------- */
  --jl-white: #ffffff;

  /* --- PRATA METÁLICA -----------------------------------------------------
     Rampa escovada para o selo de credenciamento e o filete guilhoché.
     Uso escasso: é o único ornamento do sistema.
     ---------------------------------------------------------------------- */
  --jl-metal: linear-gradient(
    135deg,
    #fafafa 0%,
    #c4c4ca 34%,
    #f2f2f4 52%,
    #a9a9b2 74%,
    #dadada 100%
  );
  --jl-metal-on-navy: linear-gradient(
    135deg,
    #dadada 0%,
    #8b8c98 36%,
    #f7f7f8 54%,
    #6c6d7a 76%,
    #c4c4ca 100%
  );

  /* --- UTILITÁRIOS DE INTERFACE ------------------------------------------
     NÃO são cores de marca. Existem só para estado de formulário e feedback
     de sistema. Proibidos em CTA, selo de credenciamento, herói e qualquer
     superfície de marketing. Dessaturados para conviver com o marinho.
     ---------------------------------------------------------------------- */
  --jl-ui-danger: #b3352e;
  --jl-ui-danger-soft: #fbeae9;
  --jl-ui-success: #1f7a4c;
  --jl-ui-success-soft: #e8f4ee;
  --jl-ui-warning: #9a6b12;
  --jl-ui-warning-soft: #f8f0dd;
}

/* --------------------------------------------------------------------------
   2. PRIMITIVOS — TIPOGRAFIA

   Faces de produção (licença aberta, auto-hospedar em /fonts,
   subset latin-ext para PT-BR):

     Poppins            — display. Geométrica moderna, mesma família de
                          desenho do logotipo. Títulos, botões, preço.
     Plus Jakarta Sans  — texto. Geométrica de interface: sustenta parágrafo
                          longo em português, o que Poppins não faz bem em
                          corpo pequeno.
     IBM Plex Mono      — dado. CNPJ, série do certificado, protocolo, preço
                          anterior, contador. Sempre tabular.

   Sem CDN: o CSP de produção bloqueia e a página cai na fonte de sistema
   sem erro visível. Use @font-face local com font-display:swap.
   -------------------------------------------------------------------------- */
:root {
  --jl-font-display: "Poppins", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --jl-font-body: "Plus Jakarta Sans", "Poppins", "Segoe UI", system-ui, sans-serif;
  --jl-font-mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;

  --jl-weight-regular: 400;
  --jl-weight-medium: 500;
  --jl-weight-semibold: 600;
  --jl-weight-bold: 700;
  --jl-weight-extrabold: 800;

  /* Poppins tem altura-x generosa e desenho largo: o tracking negativo é
     maior que o de uma grotesca, senão o título abre demais. */
  --jl-size-display-xl: clamp(2.125rem, 1.25rem + 3.8vw, 3.375rem);
  --jl-size-display-lg: clamp(1.75rem, 1.2rem + 2.4vw, 2.625rem);
  --jl-size-display-md: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --jl-size-heading-lg: 1.5rem;
  --jl-size-heading-md: 1.25rem;
  --jl-size-heading-sm: 1.125rem;
  --jl-size-body-lg: 1.125rem;
  --jl-size-body: 1rem;
  --jl-size-body-sm: 0.9375rem;
  --jl-size-caption: 0.8125rem;
  --jl-size-eyebrow: 0.75rem;

  --jl-lh-tight: 1.08;
  --jl-lh-display: 1.18;
  --jl-lh-heading: 1.35;
  --jl-lh-body: 1.65;
  --jl-lh-relaxed: 1.78;

  --jl-ls-display: -0.038em;
  --jl-ls-heading: -0.022em;
  --jl-ls-body: -0.005em;
  --jl-ls-eyebrow: 0.14em;

  /* ~65 caracteres em Plus Jakarta Sans */
  --jl-measure: 62ch;
}

/* --------------------------------------------------------------------------
   3. PRIMITIVOS — ESPAÇO, FORMA, PROFUNDIDADE, MOVIMENTO
   -------------------------------------------------------------------------- */
:root {
  --jl-space-1: 0.25rem;   /*  4 */
  --jl-space-2: 0.5rem;    /*  8 */
  --jl-space-3: 0.75rem;   /* 12 */
  --jl-space-4: 1rem;      /* 16 */
  --jl-space-5: 1.25rem;   /* 20 */
  --jl-space-6: 1.5rem;    /* 24 */
  --jl-space-8: 2rem;      /* 32 */
  --jl-space-10: 2.5rem;   /* 40 */
  --jl-space-12: 3rem;     /* 48 */
  --jl-space-14: 3.5rem;   /* 56 */
  --jl-space-16: 4rem;     /* 64 */
  --jl-space-20: 5rem;     /* 80 */
  --jl-space-24: 6rem;     /* 96 */
  --jl-space-30: 7.5rem;   /* 120 */

  --jl-radius-xs: 4px;
  --jl-radius-sm: 8px;
  --jl-radius-md: 12px;
  --jl-radius-lg: 16px;
  --jl-radius-xl: 20px;
  --jl-radius-2xl: 28px;
  --jl-radius-pill: 999px;

  /* Sombras tingidas de marinho. Sombra cinza sobre neutro prateado suja. */
  --jl-shadow-xs: 0 1px 2px rgba(6, 8, 40, 0.08);
  --jl-shadow-sm: 0 2px 8px rgba(6, 8, 40, 0.09);
  --jl-shadow-md: 0 12px 30px rgba(6, 8, 40, 0.12);
  --jl-shadow-lg: 0 24px 60px rgba(6, 8, 40, 0.17);
  --jl-shadow-emphasis: 0 14px 34px rgba(11, 15, 74, 0.34);

  --jl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --jl-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --jl-dur-fast: 120ms;
  --jl-dur-base: 200ms;
  --jl-dur-slow: 320ms;

  --jl-container: 1120px;
  --jl-container-narrow: 800px;
  --jl-gutter: var(--jl-space-5);
  --jl-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --jl-focus-ring: 3px;

  /* Marca — proporções do monograma oficial (viewBox 360 × 306) */
  --jl-logo-ratio: 1.1765;
  --jl-logo-min: 28px;   /* altura mínima de reprodução */
  --jl-logo-clear: 0.33; /* área de respiro = 33% da altura da marca */

  --jl-z-base: 0;
  --jl-z-sticky: 100;
  --jl-z-header: 200;
  --jl-z-overlay: 300;
  --jl-z-modal: 400;
  --jl-z-toast: 500;
}

@media (min-width: 768px) {
  :root { --jl-gutter: var(--jl-space-10); }
}

/* --------------------------------------------------------------------------
   4. SEMÂNTICOS — TEMA CLARO (marinho sobre branco — logo azul)
   Construa componente SÓ contra esta camada.
   -------------------------------------------------------------------------- */
/* @preview:light-start — marcador de build. O gerador do preview reaproveita
   este bloco para fixar o tema claro onde o <html> não é nosso. Não remova. */
:root {
  color-scheme: light;

  /* Superfícies */
  --surface-page: var(--jl-white);
  --surface-sunk: var(--jl-silver-050);
  --surface-card: var(--jl-white);
  --surface-silver: var(--jl-silver-100);
  --surface-inverse: var(--jl-navy-700);
  --surface-brand-soft: var(--jl-navy-050);
  --surface-brand: var(--jl-navy-700);
  --surface-metal: var(--jl-metal);

  /* Texto */
  --text-primary: var(--jl-navy-800);
  --text-secondary: var(--jl-silver-600);
  --text-tertiary: var(--jl-silver-500);
  --text-on-brand: var(--jl-white);
  --text-on-inverse: var(--jl-white);
  --text-on-inverse-muted: rgba(255, 255, 255, 0.72);
  --text-brand: var(--jl-navy-700);
  --text-link: var(--jl-navy-500);

  /* Traço */
  --border-subtle: var(--jl-silver-200);
  --border-default: var(--jl-silver-300);
  --border-strong: var(--jl-silver-400);
  --border-brand: var(--jl-navy-700);
  --border-inverse: rgba(255, 255, 255, 0.2);

  /* Ação
     Sem cor de urgência própria: a marca não tem uma quarta cor. Urgência é
     construída por peso, contraste e o selo — ver --action-emphasis. */
  --action-primary: var(--jl-navy-700);
  --action-primary-hover: var(--jl-navy-600);
  --action-primary-text: var(--jl-white);
  --action-secondary: var(--jl-silver-100);
  --action-secondary-hover: var(--jl-silver-200);
  --action-secondary-text: var(--jl-navy-700);
  --action-emphasis: var(--jl-navy-700);
  --action-emphasis-text: var(--jl-white);
  --action-emphasis-ring: var(--jl-silver-300);
  --action-disabled: var(--jl-silver-100);
  --action-disabled-text: var(--jl-silver-500);

  /* Utilitários de interface — formulário e feedback de sistema apenas */
  --state-danger: var(--jl-ui-danger);
  --state-danger-soft: var(--jl-ui-danger-soft);
  --state-success: var(--jl-ui-success);
  --state-success-soft: var(--jl-ui-success-soft);
  --state-warning: var(--jl-ui-warning);
  --state-warning-soft: var(--jl-ui-warning-soft);

  --focus-ring-color: var(--jl-navy-500);

  /* Marca — cor do monograma, herdada via currentColor pelo SVG */
  --logo-ink: var(--jl-navy-700);

  /* Filete guilhoché — prata sobre branco. Máx. 1 por página. */
  --rule-guilloche: repeating-linear-gradient(
    90deg,
    var(--jl-silver-400) 0 6px,
    transparent 6px 12px
  );
}
/* @preview:light-end */

/* --------------------------------------------------------------------------
   5. SEMÂNTICOS — TEMA ESCURO (prata sobre marinho — logo prata)
   Só os tokens semânticos mudam. Nenhum componente é reescrito aqui.
   A ação inverte: fundo prata, texto marinho. É literalmente o logo prata
   sobre o fundo institucional.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface-page: var(--jl-navy-900);
    --surface-sunk: #04061c;
    --surface-card: var(--jl-navy-800);
    --surface-silver: rgba(218, 218, 218, 0.08);
    --surface-inverse: var(--jl-silver-200);
    --surface-brand-soft: rgba(131, 138, 236, 0.14);
    --surface-brand: var(--jl-silver-200);
    --surface-metal: var(--jl-metal-on-navy);

    --text-primary: var(--jl-silver-100);
    --text-secondary: var(--jl-silver-400);
    --text-tertiary: var(--jl-silver-500);
    --text-on-brand: var(--jl-navy-800);
    --text-on-inverse: var(--jl-navy-800);
    --text-on-inverse-muted: rgba(9, 12, 58, 0.72);
    --text-brand: var(--jl-silver-200);
    --text-link: var(--jl-navy-300);

    --border-subtle: rgba(218, 218, 218, 0.14);
    --border-default: rgba(218, 218, 218, 0.24);
    --border-strong: rgba(218, 218, 218, 0.38);
    --border-brand: var(--jl-silver-200);
    --border-inverse: rgba(9, 12, 58, 0.18);

    --action-primary: var(--jl-silver-200);
    --action-primary-hover: var(--jl-white);
    --action-primary-text: var(--jl-navy-800);
    --action-secondary: rgba(218, 218, 218, 0.1);
    --action-secondary-hover: rgba(218, 218, 218, 0.18);
    --action-secondary-text: var(--jl-silver-100);
    --action-emphasis: var(--jl-silver-200);
    --action-emphasis-text: var(--jl-navy-800);
    --action-emphasis-ring: rgba(218, 218, 218, 0.45);
    --action-disabled: rgba(218, 218, 218, 0.08);
    --action-disabled-text: rgba(239, 239, 241, 0.34);

    --state-danger: #f08a82;
    --state-danger-soft: rgba(240, 138, 130, 0.14);
    --state-success: #63c68d;
    --state-success-soft: rgba(99, 198, 141, 0.14);
    --state-warning: #dcae52;
    --state-warning-soft: rgba(220, 174, 82, 0.14);

    --focus-ring-color: var(--jl-navy-300);
    --logo-ink: var(--jl-silver-200);

    --jl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
    --jl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --jl-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.55);
    --jl-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
    --jl-shadow-emphasis: 0 14px 34px rgba(0, 0, 0, 0.6);

    --rule-guilloche: repeating-linear-gradient(
      90deg,
      var(--jl-silver-500) 0 6px,
      transparent 6px 12px
    );
  }
}

/* Toggle explícito vence a preferência do sistema nas duas direções. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: var(--jl-navy-900);
  --surface-sunk: #04061c;
  --surface-card: var(--jl-navy-800);
  --surface-silver: rgba(218, 218, 218, 0.08);
  --surface-inverse: var(--jl-silver-200);
  --surface-brand-soft: rgba(131, 138, 236, 0.14);
  --surface-brand: var(--jl-silver-200);
  --surface-metal: var(--jl-metal-on-navy);

  --text-primary: var(--jl-silver-100);
  --text-secondary: var(--jl-silver-400);
  --text-tertiary: var(--jl-silver-500);
  --text-on-brand: var(--jl-navy-800);
  --text-on-inverse: var(--jl-navy-800);
  --text-on-inverse-muted: rgba(9, 12, 58, 0.72);
  --text-brand: var(--jl-silver-200);
  --text-link: var(--jl-navy-300);

  --border-subtle: rgba(218, 218, 218, 0.14);
  --border-default: rgba(218, 218, 218, 0.24);
  --border-strong: rgba(218, 218, 218, 0.38);
  --border-brand: var(--jl-silver-200);
  --border-inverse: rgba(9, 12, 58, 0.18);

  --action-primary: var(--jl-silver-200);
  --action-primary-hover: var(--jl-white);
  --action-primary-text: var(--jl-navy-800);
  --action-secondary: rgba(218, 218, 218, 0.1);
  --action-secondary-hover: rgba(218, 218, 218, 0.18);
  --action-secondary-text: var(--jl-silver-100);
  --action-emphasis: var(--jl-silver-200);
  --action-emphasis-text: var(--jl-navy-800);
  --action-emphasis-ring: rgba(218, 218, 218, 0.45);
  --action-disabled: rgba(218, 218, 218, 0.08);
  --action-disabled-text: rgba(239, 239, 241, 0.34);

  --state-danger: #f08a82;
  --state-danger-soft: rgba(240, 138, 130, 0.14);
  --state-success: #63c68d;
  --state-success-soft: rgba(99, 198, 141, 0.14);
  --state-warning: #dcae52;
  --state-warning-soft: rgba(220, 174, 82, 0.14);

  --focus-ring-color: var(--jl-navy-300);
  --logo-ink: var(--jl-silver-200);

  --jl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --jl-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --jl-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.55);
  --jl-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --jl-shadow-emphasis: 0 14px 34px rgba(0, 0, 0, 0.6);

  --rule-guilloche: repeating-linear-gradient(
    90deg,
    var(--jl-silver-500) 0 6px,
    transparent 6px 12px
  );
}

:root[data-theme="light"] { color-scheme: light; }