/* ==========================================================================
   PIOLA CURITIBA, DESIGN TOKENS
   Frame Tecnologia, 2026-10-02
   Mobile first. Tres camadas: primitivos -> semanticos -> componentes.

   LEGENDA DE ORIGEM (cada cor diz de onde veio):
   [V]  verificado no material da marca (vetor do logo ou cardapios em PDF, extraido do arquivo)
   [D]  derivado de um [V] (mesmo matiz, so mais escuro/claro) para passar contraste WCAG AA
   [I]  inferido de fotografia ou de arte, precisa de confirmacao do cliente

   REGRAS DE COR QUE NAO PODEM REGREDIR:
   1. Branco sobre #ED1C2E = 4,37:1 (so passa em texto grande). Logo, titulos e botoes
      com fonte >= 20px bold usam o vermelho da marca; texto corrido vermelho usa --piola-red-700.
   2. Vermelho da marca e CAMPO (blocos, letreiro, faixa de CTA), nunca o unico acento fino.
   3. Wordmark PIOLA e sempre o arquivo SVG vetorial (assets/logo-piola*.svg). Nunca recriar
      com fonte, o original tem letras desenhadas sob medida.
   ========================================================================== */

/* Fontes self-host (OFL): carregadas por <link> em partials/head.php, arquivo css/fonts.css */

:root {
  /* =====================================================================
     1. PRIMITIVOS
     ===================================================================== */

  /* Vermelho Piola. CMYK 0/100/91/0 no logo. [V] #ED192D no logo, #ED1C2E nos cardapios */
  --piola-red-100: #FDE9EB; /* [D] tinta clara de fundo */
  --piola-red-300: #FF5A68; /* [D] vermelho legivel sobre fundo escuro (6,31:1 sobre ink) */
  --piola-red-500: #ED1C2E; /* [V] vermelho da marca, campo */
  --piola-red-700: #C8102A; /* [D] texto e hover (5,89:1 com branco) */
  --piola-red-900: #4A0E19; /* [I] bordo profundo, inspirado na arte do feed e nos casacos das fotos */

  /* Ardosia (faixa "Famosi per la pizza" dos cardapios) [V] #4F6C78 */
  --piola-slate-300: #8FB3C0; /* [D] */
  --piola-slate-500: #4F6C78; /* [V] */
  --piola-slate-700: #3F5A66; /* [D] */
  --piola-slate-900: #2A3B43; /* [D] */

  /* Verde-agua dos codigos de prato [V] #347F7B */
  --piola-teal-500: #347F7B; /* [V] so para numeros grandes e icones (4,27:1 sobre paper) */
  --piola-teal-700: #2B6B67; /* [D] texto pequeno (5,61:1 sobre paper) */

  /* Azul dos subtitulos em ingles dos cardapios [V] */
  --piola-blue-500: #2F6095; /* [V] */
  --piola-blue-700: #1C4482; /* [V] */

  /* Verde do selo vegetariano [V] #128040 */
  --piola-green-600: #128040;

  /* Neutros */
  --piola-white: #FFFFFF;
  --piola-paper-50: #FCF8F2;  /* [V] creme */
  --piola-paper-100: #F4F4F4; /* [V] fundo dos cardapios */
  --piola-paper-200: #E8E9E8; /* [V] */
  --piola-ink-900: #0F0F10;   /* [I] preto das fotos (os cardapios usam #000 puro) */
  --piola-ink-800: #1A1A1C;   /* [D] */
  --piola-ink-600: #55575C;   /* [D] texto secundario (6,57:1 sobre paper) */
  --piola-ink-300: #B8BBC2;   /* [D] texto secundario sobre fundo escuro (9,97:1) */

  /* Pessego e cafe: paleta do cardapio de sobremesas [V] */
  --piola-peach-100: #FEE7DC; /* [V] */
  --piola-peach-300: #FBC8B4; /* [V] */
  --piola-coral-400: #F68B6F; /* [V] o "P" do manifesto "We believe in P" */
  --piola-taupe-500: #715A5A; /* [V] */
  --piola-charcoal-600: #45444F; /* [V] */

  /* Roxo do cardapio de bar [V] #4B2E8E */
  --piola-purple-700: #4B2E8E;

  /* Luzes dos pendentes de vidro do salao (acento festivo, uso minimo) [I] */
  --piola-luz-ambar: #F5B73B;
  --piola-luz-magenta: #E23E7B;
  --piola-luz-violeta: #7B4BD8;
  --piola-luz-lima: #A5C13A;

  /* Tipografia: familias.
     Original dos cardapios (verificado com pdffonts): Trade Gothic LT Std (Light, Bold, Cn18, Bold Cn20)
     e Cholla Unicase PIOLA (versao desenhada para a marca). Ambas proprietarias.
     Substitutas web licenciadas (OFL): Barlow Condensed, Barlow e Michroma. */
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-label: "Michroma", "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Londrina Sketch", "Barlow Condensed", Impact, sans-serif; /* provisoria, ver brand-discovery */
  /* Lettering do manifesto "We believe in P": ponto unico de troca quando o cliente enviar o vetor ou a fonte final */
  --font-lettering: var(--font-hand);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Escala de tamanho. Mobile first, fluida (clamp = minimo, preferido, maximo) */
  --text-2xs: 0.6875rem;  /* 11px, rotulos */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.9375rem;   /* 15px */
  --text-base: 1.0625rem; /* 17px, corpo */
  --text-md: 1.25rem;     /* 20px */
  --text-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);
  --text-3xl: clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);
  --text-display: clamp(3.5rem, 2.2rem + 8vw, 9rem);

  --leading-tight: 1.02;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.005em;
  --tracking-caps: 0.03em;     /* titulos em caixa alta condensada */
  --tracking-label: 0.22em;    /* Michroma, "FAMOSI PER LA PIZZA" */
  --tracking-wordmark: 0.55em; /* "P I O L A" em texto, quando o SVG nao couber */

  /* Espacamento, base 4px */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --space-section: clamp(3.5rem, 2rem + 6vw, 8rem); /* respiro vertical entre secoes */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Raios. A marca e retilinea (letreiro, faixa), com um circulo (placa redonda) e um painel arredondado (sobremesas) */
  --radius-0: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;   /* painel de cartao claro sobre campo de cor */
  --radius-full: 999px; /* selo redondo, chips */

  /* Sombras: neutras e curtas. Fundo escuro usa brilho, nao sombra. */
  --shadow-1: 0 1px 2px rgb(15 15 16 / 0.08), 0 1px 1px rgb(15 15 16 / 0.05);
  --shadow-2: 0 6px 16px rgb(15 15 16 / 0.10), 0 2px 4px rgb(15 15 16 / 0.06);
  --shadow-3: 0 18px 40px rgb(15 15 16 / 0.18), 0 6px 12px rgb(15 15 16 / 0.08);
  --shadow-red: 0 10px 28px rgb(237 28 46 / 0.35);
  --glow-luz: 0 0 48px rgb(245 183 59 / 0.35);
  --shadow-focus: 0 0 0 3px var(--piola-white), 0 0 0 6px var(--piola-blue-500);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-reveal: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Layout. Pontos de quebra (documentacao, variavel nao entra em @media):
     sm 480px | md 768px | lg 1024px | xl 1280px | 2xl 1536px */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;
  --header-h: 64px;
  --tap-min: 48px; /* alvo de toque minimo */

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* =====================================================================
     2. SEMANTICOS, tom DIA (padrao, fundo claro)
     ===================================================================== */
  --color-bg: var(--piola-paper-100);
  --color-bg-alt: var(--piola-white);
  --color-bg-warm: var(--piola-paper-50);
  --color-surface: var(--piola-white);
  --color-surface-inverse: var(--piola-ink-900);

  --color-text: var(--piola-ink-900);
  --color-text-muted: var(--piola-ink-600);
  --color-text-inverse: var(--piola-paper-100);

  --color-brand: var(--piola-red-500);        /* campo e titulo grande */
  --color-brand-text: var(--piola-red-700);   /* texto e link em corpo normal */
  --color-brand-hover: var(--piola-red-700);
  --color-on-brand: var(--piola-white);       /* so em texto grande/bold (>= 20px bold ou 24px) */

  --color-band: var(--piola-slate-500);       /* faixa secundaria (equivale ao "Famosi per la pizza") */
  --color-on-band: var(--piola-white);
  --color-code: var(--piola-teal-700);        /* numero do prato */
  --color-code-large: var(--piola-teal-500);
  --color-link: var(--piola-blue-700);
  --color-veg: var(--piola-green-600);

  --color-border: rgb(15 15 16 / 0.14);
  --color-border-strong: var(--piola-ink-900);
  --color-focus: var(--piola-blue-500);

  --color-success: var(--piola-green-600);
  --color-warning: #8A5A00; /* [D] ambar escuro, nunca confundir com vermelho da marca */
  --color-danger: #8E0F22;  /* [D] vinho, afastado do vermelho da marca de proposito */

  /* =====================================================================
     3. COMPONENTES (variaveis consumidas por components.css)
     ===================================================================== */
  --btn-h: var(--tap-min);
  --btn-px: var(--space-5);
  --btn-font: var(--font-display);
  --btn-size: 1.25rem; /* 20px bold: conta como texto grande, AA com 4,37:1 */
  --btn-radius: var(--radius-0);
  --card-radius: var(--radius-0);
  --letreiro-bg: var(--piola-red-500);
  --letreiro-band: var(--piola-slate-500);
  --hachura-color: var(--piola-red-500);
}

/* ==========================================================================
   TONS E TEMAS (troca de semanticos, nunca de primitivos)
   ========================================================================== */

/* Tom DIA explicito: restaura os semanticos claros dentro de um bloco escuro (ex.: painel claro sobre bordo) */
[data-tone="dia"], .pl-painel {
  --color-bg: var(--piola-paper-100);
  --color-bg-alt: var(--piola-white);
  --color-surface: var(--piola-white);
  --color-text: var(--piola-ink-900);
  --color-text-muted: var(--piola-ink-600);
  --color-brand-text: var(--piola-red-700);
  --color-brand-hover: var(--piola-red-700);
  --color-code: var(--piola-teal-700);
  --color-link: var(--piola-blue-700);
  --color-border: rgb(15 15 16 / 0.14);
  --color-focus: var(--piola-blue-500);
  color-scheme: light;
}

/* Tom NOITE: fundo preto e luz dura, como as fotos de claro-escuro */
[data-tone="noite"] {
  --color-bg: var(--piola-ink-900);
  --color-bg-alt: var(--piola-ink-800);
  --color-bg-warm: var(--piola-ink-800);
  --color-surface: var(--piola-ink-800);
  --color-surface-inverse: var(--piola-paper-100);
  --color-text: var(--piola-paper-100);
  --color-text-muted: var(--piola-ink-300);
  --color-text-inverse: var(--piola-ink-900);
  --color-brand-text: var(--piola-red-300);
  --color-brand-hover: var(--piola-red-300);
  --color-code: var(--piola-slate-300);
  --color-code-large: var(--piola-slate-300);
  --color-link: var(--piola-slate-300);
  --color-border: rgb(244 244 244 / 0.18);
  --color-border-strong: var(--piola-paper-100);
  --color-focus: var(--piola-red-300);
  --shadow-focus: 0 0 0 3px var(--piola-ink-900), 0 0 0 6px var(--piola-red-300);
  color-scheme: dark;
}

/* Tom BORDO: variante de noite para um bloco de destaque (inspirada na arte do feed) [I] */
[data-tone="bordo"] {
  --color-bg: var(--piola-red-900);
  --color-bg-alt: #3A0B14;
  --color-surface: #3A0B14;
  --color-text: var(--piola-paper-100);
  --color-text-muted: var(--piola-peach-300);
  --color-brand-text: var(--piola-red-300);
  --color-code: var(--piola-peach-300);
  --color-border: rgb(254 231 220 / 0.22);
  --color-focus: var(--piola-peach-100);
  color-scheme: dark;
}

/* Tom MARCA: campo vermelho solido (secao de reserva) */
[data-tone="marca"] {
  --color-bg: var(--piola-red-500);
  --color-bg-alt: var(--piola-red-700);
  --color-surface: var(--piola-red-700);
  --color-text: var(--piola-white);
  --color-text-muted: var(--piola-red-100);
  --color-brand-text: var(--piola-white);
  --color-brand-hover: var(--piola-red-100);
  --color-border: rgb(255 255 255 / 0.4);
  --color-focus: var(--piola-white);
  --shadow-focus: 0 0 0 3px var(--piola-red-500), 0 0 0 6px var(--piola-white);
}

/* Temas de faixa secundaria, espelhando a rotacao real dos cardapios [V]:
   pizzas = ardosia, bar = roxo, sobremesas = cafe + carvao. O vermelho do logo nunca muda. */
[data-theme="bar"] {
  --color-band: var(--piola-purple-700);
  --letreiro-band: var(--piola-purple-700);
  --color-code: var(--piola-purple-700);
  --color-code-large: var(--piola-purple-700);
}
[data-theme="sobremesas"] {
  --color-band: var(--piola-taupe-500);
  --letreiro-band: var(--piola-taupe-500);
  --color-code: var(--piola-taupe-500);
  --color-code-large: var(--piola-taupe-500);
  --color-bg-warm: var(--piola-peach-100);
}

/* ==========================================================================
   BASE MINIMA (reset suave e foco). O restante vive em components.css
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 2px; }

/* Seleção de texto na cor da marca (vermelho 700 para passar 4,5:1 com o branco). Sobre campo vermelho, inverte. */
::selection { background: var(--piola-red-700); color: var(--piola-white); text-shadow: none; }
::-moz-selection { background: var(--piola-red-700); color: var(--piola-white); text-shadow: none; }
[data-tone="marca"] ::selection, .pl-reserva ::selection { background: var(--piola-white); color: var(--piola-red-700); }
[data-tone="marca"] ::-moz-selection, .pl-reserva ::-moz-selection { background: var(--piola-white); color: var(--piola-red-700); }

/* Barras de rolagem finas na cor ardósia da marca (página e áreas roláveis internas); mais claras sobre fundo escuro */
:root { --scrollbar-thumb: var(--piola-slate-500); --scrollbar-thumb-hover: var(--piola-slate-700); }
:is([data-tone="noite"], [data-tone="bordo"], .pl-footer, .pl-drawer, .pl-lb) { --scrollbar-thumb: var(--piola-slate-300); --scrollbar-thumb-hover: var(--piola-paper-100); }
html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
:is([data-tone="noite"], [data-tone="bordo"], .pl-footer, .pl-drawer, .pl-lb, .pl-call, .pl-pratos, .pl-faixa) { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background-color 200ms; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Escala tipografica aumenta em telas maiores (corpo continua 17px, titulos ja sao fluidos) */
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}