/* Camper RJ — tokens do Design System (copiados literalmente de design-system/tokens/*.css).
   Não editar valores aqui: a fonte é o DS. Extensões do site ficam no fim, derivadas dos tokens. */
/* Fontes carregadas por <link> no <head> de cada página (mais rápido que @import). NOTE: no brand font files were supplied.
   Montserrat is the nearest Google Fonts match to the geometric all-caps lettering
   used on camper-rj.com and in the selo; Barlow carries body copy.
   Replace with licensed brand files if they exist. */

/* ---- colors.css ---- */
:root{
  /* ---- Brand core (fixed, never altered) ---- */
  --brand-green:#365c42;
  --brand-red:#a41006;
  --brand-white:#ffffff;
  --brand-gray:#acada1;

  /* ---- Green scale (derived from --brand-green) ---- */
  --green-50:#eef3ef;
  --green-100:#d7e2da;
  --green-200:#aec4b3;
  --green-300:#81a08a;
  --green-400:#567b62;
  --green-500:#365c42;
  --green-600:#2d4c37;
  --green-700:#243d2c;
  --green-800:#1a2c20;
  --green-900:#111d15;

  /* ---- Red scale (derived from --brand-red) ---- */
  --red-50:#fbedec;
  --red-100:#f4d2ce;
  --red-200:#e5a49c;
  --red-300:#cf6d61;
  --red-400:#b93326;
  --red-500:#a41006;
  --red-600:#8b0e05;
  --red-700:#6e0b04;
  --red-800:#4e0803;
  --red-900:#2f0502;

  /* ---- Sand / gray scale (derived from --brand-gray) ---- */
  --sand-50:#f8f8f6;
  --sand-100:#efefec;
  --sand-200:#e0e0da;
  --sand-300:#cacbc2;
  --sand-400:#acada1;
  --sand-500:#93948a;
  --sand-600:#75766d;
  --sand-700:#555650;
  --sand-800:#383934;
  --sand-900:#1e1f1c;

  /* ---- Semantic: surfaces ---- */
  --surface-page:var(--brand-white);
  --surface-muted:var(--sand-50);
  --surface-sunken:var(--sand-100);
  --surface-card:var(--brand-white);
  --surface-invert:var(--green-500);
  --surface-invert-deep:var(--green-800);
  --surface-accent:var(--red-500);
  --surface-accent-soft:var(--red-50);
  --surface-green-soft:var(--green-50);

  /* ---- Semantic: ink ---- */
  --text-heading:var(--green-800);
  --text-body:var(--sand-800);
  --text-muted:var(--sand-600);
  --text-subtle:var(--sand-500);
  --text-on-invert:var(--brand-white);
  --text-on-invert-muted:var(--green-100);
  --text-accent:var(--red-500);
  --text-link:var(--green-500);
  --text-link-hover:var(--red-500);

  /* ---- Semantic: borders / lines ---- */
  --border-hairline:var(--sand-200);
  --border-default:var(--sand-300);
  --border-strong:var(--green-500);
  --border-invert:rgba(255,255,255,.24);
  --rule-dashed:var(--sand-300);

  /* ---- Semantic: interactive ---- */
  --action-primary:var(--green-500);
  --action-primary-hover:var(--green-600);
  --action-primary-active:var(--green-700);
  --action-accent:var(--red-500);
  --action-accent-hover:var(--red-600);
  --action-accent-active:var(--red-700);
  --action-ghost-hover:var(--green-50);
  --focus-ring:var(--red-500);
  --disabled-surface:var(--sand-100);
  --disabled-ink:var(--sand-500);

  /* ---- Semantic: status ---- */
  --status-success:var(--green-500);
  --status-success-soft:var(--green-50);
  --status-danger:var(--red-500);
  --status-danger-soft:var(--red-50);
  --status-neutral:var(--sand-500);
  --status-neutral-soft:var(--sand-100);

  /* ---- Overlays / protection ---- */
  --overlay-scrim:rgba(17,29,21,.62);
  --overlay-photo-top:linear-gradient(180deg,rgba(17,29,21,.55) 0%,rgba(17,29,21,0) 55%); /* @kind other */
  --overlay-photo-bottom:linear-gradient(0deg,rgba(17,29,21,.72) 0%,rgba(17,29,21,0) 62%); /* @kind other */
}

/* ---- typography.css ---- */
:root{
  /* families */
  --font-display:'Montserrat','Segoe UI',system-ui,sans-serif;
  --font-body:'Barlow','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,monospace;

  /* weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  /* display / heading sizes (fluid where useful) */
  --text-hero:clamp(2.75rem,5.2vw,4.5rem);
  --text-display:clamp(2.25rem,3.6vw,3.25rem);
  --text-h1:2.5rem;
  --text-h2:2rem;
  --text-h3:1.5rem;
  --text-h4:1.25rem;
  --text-lead:1.1875rem;
  --text-body-lg:1.0625rem;
  --text-body-md:1rem;
  --text-body-sm:.9375rem;
  --text-caption:.8125rem;
  --text-eyebrow:.75rem;

  /* line heights */
  --leading-tight:1.04;
  --leading-snug:1.18;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* tracking — the brand voice lives in wide caps */
  --tracking-seal:.22em;
  --tracking-eyebrow:.16em;
  --tracking-button:.12em;
  --tracking-heading:-.01em;
  --tracking-normal:0;

  /* composed roles */
  --type-eyebrow:var(--weight-bold) var(--text-eyebrow)/1.2 var(--font-display);
  --type-heading:var(--weight-bold) var(--text-h2)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-body-md)/var(--leading-relaxed) var(--font-body);
  --type-button:var(--weight-bold) var(--text-body-sm)/1 var(--font-display);
}

/* ---- spacing.css ---- */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --space-8:56px;
  --space-9:72px;
  --space-10:96px;
  --space-11:128px;

  /* layout */
  --container-max:1200px;
  --container-narrow:760px;
  --gutter:24px;
  --gutter-lg:40px;
  --section-y:var(--space-10);
  --section-y-tight:var(--space-8);
  --stack-gap:var(--space-4);
  --control-height:48px;
  --control-height-sm:38px;
  --control-height-lg:56px;
  --control-pad-x:22px;
  --card-pad:var(--space-5);
  --card-pad-lg:var(--space-6);
}

/* ---- radius.css ---- */
:root{
  --radius-0:0;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-seal:50%;

  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-sm);
  --radius-badge:var(--radius-pill);
  --radius-media:var(--radius-md);
}

/* ---- elevation.css ---- */
:root{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-sm:0 1px 2px rgba(30,31,28,.08),0 1px 1px rgba(30,31,28,.04);
  --shadow-md:0 6px 16px -6px rgba(30,31,28,.18),0 2px 4px rgba(30,31,28,.06);
  --shadow-lg:0 18px 40px -18px rgba(17,29,21,.28),0 4px 10px rgba(30,31,28,.06);
  --shadow-inset-line:inset 0 -1px 0 var(--border-hairline);
  --shadow-focus:0 0 0 3px rgba(164,16,6,.28);
  --shadow-press:inset 0 2px 4px rgba(17,29,21,.22);
}

/* ---- motion.css ---- */
:root{
  --duration-instant:80ms; /* @kind other */
  --duration-fast:140ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.25,1); /* @kind other */
  --ease-out:cubic-bezier(.16,.84,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,.9,.4); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-instant) var(--ease-standard);
  --transition-surface:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:1ms; /* @kind other */ --duration-base:1ms; /* @kind other */ --duration-slow:1ms /* @kind other */}}

/* ---- Extensões do site (derivadas dos tokens acima; nenhuma cor nova) ---- */
:root{
  --header-h:76px;
  --chapnav-h:48px;
  --accent-on-dark:var(--red-300);          /* palavra de destaque sobre foto/verde: vermelho da marca clareado p/ contraste AA de texto grande */
  --shadow-field-focus:0 0 0 3px rgba(54,92,66,.16); /* halo verde dos campos (valor do componente Input do DS) */
  --invert-soft:rgba(255,255,255,.14);      /* DS: branco 14–26% só para controles invert sobre foto */
  --text-hero-xl:clamp(3.25rem,min(15vw,18.5vh),10.5rem); /* título dominante (mecanismo 2 da referência) */
  --text-menu:clamp(2rem,4vw,4rem);
  --ease-cinema:cubic-bezier(.77,0,.18,1);  /* transições de camada (referência) */
  --duration-layer:800ms; /* @kind other */
}
/* Decisão do Rodrigo (02/10/2026): uma fonte só, a Montserrat (a mesma do selo), variando apenas o peso.
   800 = títulos e preços · 600 = menu, botões e etiquetas em caixa alta · 400/500 = textos. A Barlow saiu. */
:root{
  --font-body:var(--font-display);
  --type-eyebrow:var(--weight-semibold) var(--text-eyebrow)/1.2 var(--font-display);
  --type-button:var(--weight-semibold) var(--text-body-sm)/1 var(--font-display);
  --type-body:var(--weight-regular) var(--text-body-md)/1.7 var(--font-display);
}
@media (prefers-reduced-motion:reduce){:root{--duration-layer:1ms}}