/* ============================================================================
   SELLER HUBIA — DESIGN TOKENS
   Fonte da verdade. Nenhum valor bruto deve aparecer fora deste arquivo.

   Tres camadas, nesta ordem:
     1. PRIMITIVOS  — a tinta. Nunca use direto em componente.
     2. PAPEIS      — o que a tinta significa. E isto que voce usa.
     3. COMPONENTES — medidas fixas de pecas especificas.

   Tema: escuro e o padrao. [data-theme="light"] e a variante.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. PRIMITIVOS
   ------------------------------------------------------------------------ */
:root {
  /* Laranja alta visibilidade. #FF5400 e o master, extraido do logotipo. */
  --sh-orange-050: #fff0e8;
  --sh-orange-200: #ffbb96;
  --sh-orange-300: #ff9a66;
  --sh-orange-400: #ff7733;
  --sh-orange-500: #ff5400; /* MASTER */
  --sh-orange-600: #d94400;
  --sh-orange-700: #a83500;
  --sh-orange-800: #6e2200;

  /* Azul acao obrigatoria. #173DB8 e o master, extraido do simbolo. */
  --sh-blue-050: #e9edfc;
  --sh-blue-200: #b3c1f6;
  --sh-blue-300: #8ea3f2;
  --sh-blue-400: #5c7bea;
  --sh-blue-500: #2c56d8;
  --sh-blue-600: #173db8; /* MASTER */
  --sh-blue-700: #102b82;
  --sh-blue-800: #0a1b53;

  /* Concreto. Neutro frio, sob luz de galpao. */
  --sh-concrete-000: #ffffff;
  --sh-concrete-050: #f4f4f1;
  --sh-concrete-100: #e6e6e1;
  --sh-concrete-200: #cfd0cc;
  --sh-concrete-300: #a9acb2;
  --sh-concrete-400: #9096a1;
  --sh-concrete-450: #686e79;
  --sh-concrete-500: #5a5f69;
  --sh-concrete-600: #3c414a;
  --sh-concrete-700: #262a31;
  --sh-concrete-800: #1c1f25;
  --sh-concrete-900: #131519;
  --sh-concrete-950: #0b0c0e;
  --sh-concrete-1000: #000000;

  /* Sinalizacao de seguranca. Completa a ISO 7010 que a marca ja ocupa pela
     metade: laranja = alta visibilidade, azul = acao obrigatoria. */
  --sh-stop-300: #ff8195;
  --sh-stop-500: #c8102e;
  --sh-stop-700: #7d0a1d;
  --sh-warn-300: #ffd04a;
  --sh-warn-500: #f5b700;
  --sh-warn-700: #8a6700;
  --sh-clear-300: #4bd98a;
  --sh-clear-500: #00843d;
  --sh-clear-700: #045026;

  /* --------------------------------------------------------------------
     TIPOGRAFIA — primitivos
     Archivo: grotesca de sinalizacao viaria, eixo de largura real (62-125).
     Condensada e pesada, vira placa de corredor. Em largura normal, texto.
     Martian Mono: mono tecnica de largura variavel. Codigo de endereco,
     valor de token, SKU, dado. Nunca decoracao.
     -------------------------------------------------------------------- */
  --sh-font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sh-font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sh-wdth-sign: 78;   /* placa: condensada */
  --sh-wdth-text: 100;  /* leitura: normal */
  --sh-wdth-code: 87.5; /* dado: levemente estreita */

  /* Escala tipografica. Razao 1.25 na leitura, saltos maiores na sinalizacao. */
  --sh-size-micro: 0.6875rem; /* 11px */
  --sh-size-label: 0.75rem;   /* 12px */
  --sh-size-note: 0.875rem;   /* 14px */
  --sh-size-body: 1rem;       /* 16px */
  --sh-size-lead: 1.125rem;   /* 18px */
  --sh-size-sign-4: 1.375rem; /* 22px */
  --sh-size-sign-3: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --sh-size-sign-2: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
  --sh-size-sign-1: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem);
  --sh-size-dock: clamp(3.5rem, 2rem + 6.4vw, 6rem); /* numeral de doca */
  /* Placa em bleed: o degrau maior da rampa, so para o titulo que sangra a tela. */
  --sh-size-plate: clamp(2.5rem, 1rem + 5.7vw, 7rem);

  --sh-leading-tight: 0.94;
  --sh-leading-sign: 1.02;
  --sh-leading-snug: 1.25;
  --sh-leading-body: 1.6;
  --sh-leading-loose: 1.75;

  --sh-tracking-sign: -0.025em;
  --sh-tracking-tight: -0.012em;
  --sh-tracking-normal: 0em;
  --sh-tracking-label: 0.14em; /* caixa alta pequena: estencil de placa */

  --sh-weight-regular: 400;
  --sh-weight-medium: 500;
  --sh-weight-bold: 700;
  --sh-weight-black: 900;

  /* --------------------------------------------------------------------
     ESPACO — base 4px. Marcacao de piso e modular.
     -------------------------------------------------------------------- */
  --sh-space-0: 0;
  --sh-space-1: 0.25rem;  /*  4 */
  --sh-space-2: 0.5rem;   /*  8 */
  --sh-space-3: 0.75rem;  /* 12 */
  --sh-space-4: 1rem;     /* 16 */
  --sh-space-5: 1.5rem;   /* 24 */
  --sh-space-6: 2rem;     /* 32 */
  --sh-space-7: 3rem;     /* 48 */
  --sh-space-8: 4rem;     /* 64 */
  --sh-space-9: 6rem;     /* 96 */
  --sh-space-10: 8rem;    /* 128 */

  /* --------------------------------------------------------------------
     FORMA — o raio vem do simbolo: o ladrilho tem 20 de raio em 93 de lado.
     Regra do modulo: em superficie quadrada, raio = 21% do lado.
     -------------------------------------------------------------------- */
  --sh-radius-xs: 3px;
  --sh-radius-sm: 6px;
  --sh-radius-md: 10px;
  --sh-radius-lg: 16px;
  --sh-radius-xl: 24px;
  --sh-radius-pill: 999px;
  --sh-radius-module: 21%; /* ladrilho: acompanha o tamanho */

  --sh-border-hairline: 1px;
  --sh-border-marked: 2px;
  --sh-border-painted: 6px; /* faixa de piso */

  /* --------------------------------------------------------------------
     MOVIMENTO — a gramatica e uma so: avanca no trilho e assenta.
     -------------------------------------------------------------------- */
  --sh-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --sh-ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
  --sh-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --sh-dur-snap: 140ms;
  --sh-dur-advance: 320ms;
  --sh-dur-settle: 640ms;

  /* --------------------------------------------------------------------
     GRADE E MEDIDA
     -------------------------------------------------------------------- */
  --sh-measure: 68ch;      /* medida de leitura */
  --sh-measure-tight: 46ch;
  --sh-shell-max: 1320px;
  --sh-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --sh-tap-min: 44px;      /* alvo de toque minimo */
}

/* ---------------------------------------------------------------------------
   2. PAPEIS — TEMA ESCURO (padrao)
   ------------------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Superficies, do chao para cima */
  --ground: var(--sh-concrete-950);
  --deck: var(--sh-concrete-900);
  --plate: var(--sh-concrete-800);
  --plate-raised: var(--sh-concrete-700);
  --plate-sunken: var(--sh-concrete-1000);

  /* Linhas */
  --line-hairline: rgb(255 255 255 / 0.10);
  --line-marked: rgb(255 255 255 / 0.20);
  --line-strong: rgb(255 255 255 / 0.34);

  /* Texto */
  --ink: var(--sh-concrete-050);
  --ink-secondary: var(--sh-concrete-300);
  --ink-tertiary: var(--sh-concrete-400);
  --ink-inverse: var(--sh-concrete-950);
  --ink-on-signal: var(--sh-concrete-1000);   /* sobre laranja */
  --ink-on-mandatory: var(--sh-concrete-050); /* sobre azul */

  /* Marca em papel de tinta */
  --signal: var(--sh-orange-500);
  --signal-ink: var(--sh-orange-400);  /* laranja legivel como texto no escuro */
  --signal-hover: var(--sh-orange-400);
  --signal-press: var(--sh-orange-600);
  --signal-wash: rgb(255 84 0 / 0.12);

  --mandatory: var(--sh-blue-600);
  --mandatory-ink: var(--sh-blue-300); /* azul NUNCA e tinta em #173DB8 no escuro */
  --mandatory-hover: var(--sh-blue-500);
  --mandatory-press: var(--sh-blue-700);
  --mandatory-wash: rgb(23 61 184 / 0.22);
  --mandatory-stroke: var(--sh-blue-400); /* borda/icone: #173DB8 nao alcanca 3:1 no escuro */

  /* Estados de sinalizacao */
  --stop: var(--sh-stop-500);
  --stop-ink: var(--sh-stop-300);
  --stop-wash: rgb(200 16 46 / 0.16);
  --warn: var(--sh-warn-500);
  --warn-ink: var(--sh-warn-300);
  --warn-wash: rgb(245 183 0 / 0.14);
  --clear: var(--sh-clear-500);
  --clear-ink: var(--sh-clear-300);
  --clear-wash: rgb(0 132 61 / 0.18);

  /* Foco: sempre visivel, sempre a mesma peca */
  --focus-ring: var(--sh-orange-400);
  --focus-ring-offset: var(--ground);

  /* Elevacao. Sinalizacao e plana; sombra so quando a peca realmente paira. */
  --elev-none: none;
  --elev-plate: 0 1px 2px rgb(0 0 0 / 0.5);
  --elev-overhead: 0 14px 34px -10px rgb(0 0 0 / 0.72), 0 3px 8px -3px rgb(0 0 0 / 0.55);
  --elev-lifted: 0 26px 60px -18px rgb(0 0 0 / 0.8), 0 6px 14px -6px rgb(0 0 0 / 0.6);

  /* Marca aplicada: cor das palavras do logotipo neste fundo */
  --wordmark-seller: var(--sh-concrete-050);
  --wordmark-hub: var(--sh-orange-500);
  --wordmark-ia: var(--sh-concrete-050);
}

/* ---------------------------------------------------------------------------
   2b. PAPEIS — TEMA CLARO (variante)
   ------------------------------------------------------------------------ */
[data-theme="light"] {
  color-scheme: light;

  --ground: var(--sh-concrete-050);
  --deck: var(--sh-concrete-000);
  --plate: var(--sh-concrete-100);
  --plate-raised: var(--sh-concrete-000);
  --plate-sunken: var(--sh-concrete-200);

  --line-hairline: rgb(11 12 14 / 0.12);
  --line-marked: rgb(11 12 14 / 0.24);
  --line-strong: rgb(11 12 14 / 0.42);

  --ink: var(--sh-concrete-950);
  --ink-secondary: var(--sh-concrete-500);
  --ink-tertiary: var(--sh-concrete-450);
  --ink-inverse: var(--sh-concrete-050);
  --ink-on-signal: var(--sh-concrete-1000);
  --ink-on-mandatory: var(--sh-concrete-050);

  --signal: var(--sh-orange-500);
  --signal-ink: var(--sh-orange-700); /* laranja puro nao passa AA como texto no claro */
  --signal-hover: var(--sh-orange-600);
  --signal-press: var(--sh-orange-700);
  --signal-wash: rgb(255 84 0 / 0.10);

  --mandatory: var(--sh-blue-600);
  --mandatory-ink: var(--sh-blue-600); /* no claro o azul master E tinta */
  --mandatory-hover: var(--sh-blue-500);
  --mandatory-press: var(--sh-blue-800);
  --mandatory-wash: rgb(23 61 184 / 0.09);
  --mandatory-stroke: var(--sh-blue-600);

  --stop: var(--sh-stop-500);
  --stop-ink: var(--sh-stop-500);
  --stop-wash: rgb(200 16 46 / 0.09);
  --warn: var(--sh-warn-500);
  --warn-ink: var(--sh-warn-700);
  --warn-wash: rgb(245 183 0 / 0.16);
  --clear: var(--sh-clear-500);
  --clear-ink: var(--sh-clear-700);
  --clear-wash: rgb(0 132 61 / 0.10);

  --focus-ring: var(--sh-blue-600);
  --focus-ring-offset: var(--ground);

  --elev-none: none;
  --elev-plate: 0 1px 2px rgb(11 12 14 / 0.10);
  --elev-overhead: 0 14px 30px -12px rgb(11 12 14 / 0.24), 0 2px 6px -2px rgb(11 12 14 / 0.12);
  --elev-lifted: 0 26px 54px -20px rgb(11 12 14 / 0.3), 0 6px 12px -6px rgb(11 12 14 / 0.14);

  --wordmark-seller: var(--sh-blue-600);
  --wordmark-hub: var(--sh-orange-500);
  --wordmark-ia: var(--sh-blue-600);
}

/* ---------------------------------------------------------------------------
   3. COMPONENTES
   ------------------------------------------------------------------------ */
:root {
  --ctl-height-sm: 32px;
  --ctl-height-md: 44px;
  --ctl-height-lg: 56px;
  --ctl-pad-x-sm: var(--sh-space-3);
  --ctl-pad-x-md: var(--sh-space-5);
  --ctl-pad-x-lg: var(--sh-space-6);
  --ctl-radius: var(--sh-radius-sm);
  --ctl-focus-width: 3px;
  --ctl-focus-offset: 2px;

  --plate-radius: var(--sh-radius-md);
  --plate-pad: var(--sh-space-5);

  --hazard-height: 10px;   /* fita de risco */
  --hazard-pitch: 22px;    /* passo da listra */

  --dock-rule-width: var(--sh-border-marked);
}