/* Sinchi design tokens. Source of truth: brand/tokens.json (keep both in step).
   Fonts: brand/fonts/fonts.css. Decisions and the contrast matrix: brand/brand-brief.md. */

:root {
  /* Brand colours, measured on the logo (brand/source/logo-facebook-960.jpg) */
  --petrol: #265A65;        /* Petróleo: the disc */
  --mustard: #FEBD59;       /* Mostarda: «SINCHI» */
  --orange: #F39356;        /* Laranja: «COCINA PERUANA» */
  --cream: #F9F0E1;         /* Creme: the ground */
  /* Derived, one role each */
  --petrol-deep: #16353B;   /* Petróleo profundo: body text on cream, deepest surface */
  --petrol-muted: #456B73;  /* Petróleo suave: secondary text on cream */
  --mist: #CFD2C8;          /* Névoa: secondary text on petrol */
  --rule-soft: #C4CAC2;     /* Filete claro: decorative rules on cream, never a UI border */
  --rust: #8C3230;          /* Ferrugem: from the kitchen apron; form errors and «fechado» only */

  /* Semantic roles, light surface (the default) */
  --surface: var(--cream);
  --surface-accent: var(--mustard);
  --surface-dark: var(--petrol);
  --surface-deep: var(--petrol-deep);
  --text: var(--petrol-deep);
  --text-heading: var(--petrol);
  --text-muted: var(--petrol-muted);
  --label: var(--petrol);
  --accent: var(--mustard);
  --action: var(--petrol);
  --on-action: var(--cream);
  --action-hover: var(--petrol-deep);
  --focus: var(--petrol);
  --rule: var(--petrol);
  --input-border: var(--petrol);
  --error: var(--rust);
  --success: var(--petrol);
  --brand: var(--petrol);
  --on-brand: var(--cream);
  --selection: var(--mustard);
  --on-selection: var(--petrol-deep);

  /* Type */
  --font-display: "League Gothic", "Arial Narrow", sans-serif;
  --font-text: "Archivo", "Archivo fallback", Arial, sans-serif;
  --fs-poster: clamp(7rem, 4.5rem + 11.1111vw, 14.5rem);
  --fs-h1: clamp(3.5rem, 2.1667rem + 5.9259vw, 7.5rem);
  --fs-h2: clamp(2.5rem, 1.8333rem + 2.963vw, 4.5rem);
  --fs-h3: clamp(1.75rem, 1.5rem + 1.1111vw, 2.5rem);
  --fs-label: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
  --fs-lead: clamp(1.1875rem, 1.0833rem + 0.463vw, 1.5rem);
  --fs-body: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;
  --lh-poster: 0.86;
  --lh-title: 0.92;
  --lh-label: 1.1;
  --lh-body: 1.55;
  --lh-small: 1.45;
  --tr-poster: 0.02em;
  --tr-h1: 0.025em;
  --tr-h2: 0.03em;
  --tr-h3: 0.04em;
  --tr-label: 0.075em;     /* the logo's own tracking */
  --tr-caps-text: 0.08em;  /* Archivo in capitals, rare */
  --fw-text: 400;
  --fw-dish: 600;
  --fw-strong: 700;

  /* Space: a 4 px base with real jumps */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 144px;
  --gutter: clamp(1rem, 0.1667rem + 3.7037vw, 3.5rem);
  --section: clamp(4rem, 2.3333rem + 7.4074vw, 9rem);
  --measure: 66ch;
  --max: 1320px;

  /* Shape and depth: square corners or a full circle, nothing between; flat */
  --radius: 0;
  --radius-circle: 50%;
  --border: 1px;
  --border-strong: 2px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --shadow: none;

  /* Motion (emil-design-eng values, local-business-studio/reference/motion.md) */
  --e-out: cubic-bezier(.23, 1, .32, 1);
  --e-in-out: cubic-bezier(.77, 0, .175, 1);
  --e-gaveta: cubic-bezier(.32, .72, 0, 1);
  --d-press: 120ms;
  --d-micro: 160ms;
  --d-hover: 180ms;
  --d-short: 220ms;
  --d-drawer-in: 280ms;
  --d-drawer-out: 200ms;
  --d-title-line: 520ms;
  --d-title-stagger: 70ms;
  --d-list-stagger: 55ms;
  --d-circle: 640ms;
  --d-photo: 700ms;
  --d-page-out: 160ms;
  --d-page-in: 300ms;
  --d-fade: 160ms;

  --z-header: 10;
  --z-drawer: 20;
  --z-modal: 30;

  color-scheme: light;
  accent-color: var(--brand);
  caret-color: var(--brand);
}

/* Petrol sections (and a dark mode, if the shell maps prefers-color-scheme to it).
   Forms do not sit on these surfaces. */
.on-dark,
[data-surface="petrol"],
[data-surface="deep"] {
  --surface: var(--petrol);
  --text: var(--cream);
  --text-heading: var(--mustard);
  --text-muted: var(--mist);
  --label: var(--mustard);   /* orange on petrol only at 24 px and up (3,34:1) */
  --action: var(--mustard);
  --on-action: var(--petrol-deep);
  --action-hover: var(--cream);
  --focus: var(--mustard);
  --rule: var(--mist);
  --brand: var(--mustard);
  --on-brand: var(--petrol-deep);
}
[data-surface="deep"] {
  --surface: var(--petrol-deep);
  --label: var(--orange);    /* 5,68:1 on deep petrol: any size */
}

/* Mustard bands: deep petrol text, petrol action */
[data-surface="mustard"] {
  --surface: var(--mustard);
  --text: var(--petrol-deep);
  --text-heading: var(--petrol-deep);
  --text-muted: var(--petrol-deep);
  --label: var(--petrol-deep);
  --action: var(--petrol-deep);
  --on-action: var(--mustard);
  --action-hover: var(--petrol);
  --focus: var(--petrol-deep);
  --rule: var(--petrol-deep);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-circle: 0ms;
    --d-photo: 0ms;
    --d-title-line: 0ms;
    --d-title-stagger: 0ms;
    --d-list-stagger: 0ms;
  }
}