/* Family Car Detailing — tokens (fonte: projeto/styleguide/family-web-styleguide.html, bloco fcd-tokens) */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-var-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-mono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/plex-mono-500-latin.woff2) format('woff2'); }

:root {
  /* cor · marca (Brand Book 1.0) */
  --fcd-yellow: #FFED00;
  --fcd-black: #0D0B0C;
  --fcd-white: #F6FBFF;
  --fcd-graphite: #1A1819;
  --fcd-steel: #2A2729;
  --fcd-silver: #8C8A8B;
  --fcd-chrome: #C9C7C8;
  --fcd-ink-700: #3A3638;
  --fcd-ink-500: #5A5658;
  --fcd-mist: #E6EBEF;

  /* cor · estado (extensão para web, fora do brand book) */
  --fcd-error: #FF6B5E;
  --fcd-error-ink: #B3261E;
  --fcd-success: #4FD08A;
  --fcd-success-ink: #1B6E42;

  /* cor · papéis — tema Carbon (padrão) */
  --bg: var(--fcd-black);
  --surface: var(--fcd-graphite);
  --border: var(--fcd-steel);
  --control-border: var(--fcd-silver);
  --text: var(--fcd-white);
  --text-2: var(--fcd-chrome);
  --muted: var(--fcd-silver);
  --accent: var(--fcd-yellow);
  --on-accent: var(--fcd-black);
  --hl: var(--fcd-yellow);
  --eyebrow: var(--fcd-yellow);
  --bar: var(--fcd-yellow);
  --focus: var(--fcd-yellow);
  --danger: var(--fcd-error);
  --ok: var(--fcd-success);
  --sheen: rgba(255, 255, 255, .7);

  /* tipo */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-display: clamp(44px, 7vw, 112px);
  --fs-h1: clamp(38px, 5.2vw, 80px);
  --fs-h2: clamp(30px, 4vw, 56px);
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-h4: 20px;
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: clamp(16px, .6vw + 13px, 18px);
  --fs-small: 15px;
  --fs-eyebrow: 13px;

  /* espaço (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* layout */
  --container: 1280px;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section: clamp(64px, 9vw, 144px);
  --header-h: 76px;

  /* forma */
  --fcd-radius: 0;
  --fcd-cut: 12px;
  --cut: polygon(var(--fcd-cut) 0, 100% 0, 100% calc(100% - var(--fcd-cut)), calc(100% - var(--fcd-cut)) 100%, 0 100%, 0 var(--fcd-cut));

  /* movimento */
  --fcd-ease: cubic-bezier(.2, .7, .1, 1);
  --fcd-dur-1: 160ms;
  --fcd-dur-2: 240ms;
  --fcd-dur-3: 480ms;
  --fcd-dur-4: 900ms;

  /* camadas */
  --z-base: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-callbar: 110;
  --z-overlay: 1000;
}

/* tema Gloss — seções claras de respiro */
[data-theme="gloss"] {
  --bg: var(--fcd-white);
  --surface: var(--fcd-mist);
  --border: var(--fcd-chrome);
  --control-border: var(--fcd-ink-500);
  --text: var(--fcd-black);
  --text-2: var(--fcd-ink-700);
  --muted: var(--fcd-ink-500);
  --accent: var(--fcd-black);
  --on-accent: var(--fcd-white);
  --hl: var(--fcd-black);
  --eyebrow: var(--fcd-ink-500);
  --focus: var(--fcd-black);
  --danger: var(--fcd-error-ink);
  --ok: var(--fcd-success-ink);
  --sheen: rgba(255, 255, 255, .28);
}

/* tema Yellow — uma seção de chamada por página */
[data-theme="yellow"] {
  --bg: var(--fcd-yellow);
  --surface: var(--fcd-black);
  --border: var(--fcd-black);
  --control-border: var(--fcd-black);
  --text: var(--fcd-black);
  --text-2: var(--fcd-black);
  --muted: var(--fcd-black);
  --accent: var(--fcd-black);
  --on-accent: var(--fcd-yellow);
  --hl: var(--fcd-black);
  --eyebrow: var(--fcd-black);
  --bar: var(--fcd-black);
  --focus: var(--fcd-black);
  --sheen: rgba(255, 255, 255, .28);
}

/* tema Carbon declarado, para aninhar dentro de seções claras */
[data-theme="carbon"] {
  --bg: var(--fcd-black);
  --surface: var(--fcd-graphite);
  --border: var(--fcd-steel);
  --control-border: var(--fcd-silver);
  --text: var(--fcd-white);
  --text-2: var(--fcd-chrome);
  --muted: var(--fcd-silver);
  --accent: var(--fcd-yellow);
  --on-accent: var(--fcd-black);
  --hl: var(--fcd-yellow);
  --eyebrow: var(--fcd-yellow);
  --bar: var(--fcd-yellow);
  --focus: var(--fcd-yellow);
  --danger: var(--fcd-error);
  --ok: var(--fcd-success);
  --sheen: rgba(255, 255, 255, .7);
}