/* Petiza Studio design tokens, v2 (logo: petiza-serif-p.svg).
 * Import: @import url("brand/petiza-studio/tokens.css");
 * Variable names are stable; values may be tuned. See brand.md for usage and contrast rules.
 * Fonts load from ./fonts relative to this file (SIL Open Font License).
 * SITE COPY: identical to brand/petiza-studio/tokens.css except @font-face src, which
 * prefers Latin-subset WOFF2 files (Cormorant 1.2 MB TTF -> 60 KB) with the TTFs as fallback.
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-VF-subset.woff2") format("woff2"), url("fonts/CormorantGaramond-VF.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-VF-subset.woff2") format("woff2"), url("fonts/Figtree-VF.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour: primaries (from the logo) ---- */
  --color-ink: #193B71;      /* Tinta de Petiza: the girl. Text and UI on light. */
  --color-gold: #D9A441;     /* Oro de cuento: the P and the pencil. Light on dark; never text on Cal. */

  /* ---- Colour: grounds ---- */
  --color-night: #0E1E3A;    /* Noche de San Miguel: dark backgrounds, film, hero. */
  --color-cal: #F6ECDC;      /* Cal: light background, text on night/ink. */

  /* ---- Colour: world accents ---- */
  --color-candela: #E8963A;  /* Candela: candle glow, highlights on dark. */
  --color-torogoz: #1A8B9D;  /* Torogoz: kids' themes, illustration. Large text only. */
  --color-morro: #3F7D4E;    /* Hoja de morro: nature, success. Large text only on Cal. */
  --color-ayote: #C4561E;    /* Ayote en miel: warm accent, badges. Large text only on Cal. */
  --color-teja: #9E4A2F;     /* Teja: secondary text on Cal. */

  /* ---- Colour: helpers ---- */
  --color-cal-deep: #EFE3CF;           /* alternate light section */
  --color-paper: #FBF6EE;              /* cards on Cal */
  --color-ink-muted: rgba(25, 59, 113, 0.72);
  --color-cal-muted: rgba(246, 236, 220, 0.72);
  --color-line: rgba(25, 59, 113, 0.14);
  --color-line-on-dark: rgba(246, 236, 220, 0.16);

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;   /* 24px and up */
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-display: 600;
  --weight-text: 400;
  --weight-label: 600;
  --tracking-label: 0.2em;

  --text-xs: 0.8125rem;   /* 13px labels */
  --text-sm: 0.9375rem;   /* 15px */
  --text-md: 1.125rem;    /* 18px body */
  --text-lg: 1.375rem;    /* 22px lede */
  --text-xl: 2rem;        /* 32px H3 (display) */
  --text-2xl: 2.75rem;    /* 44px H2 */
  --text-3xl: 4rem;       /* 64px H1 */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-body: 1.55;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: 16px;          /* phone side gutter; use 24-32px from 600px up */
  --content-max: 1120px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 0 rgba(14, 30, 58, 0.06), 0 18px 40px -24px rgba(14, 30, 58, 0.35);
}