/* The Rolling Carinderia — design tokens (v1.0, July 2026)
   Import this file as-is, or copy the custom properties into your global stylesheet.
   Source of truth: branding/Kainan-C-Brand-Guide.html */

:root {
  /* — Color — */
  --color-red:      #D62828;  /* Jeepney Red — primary: headings, CTAs, accents */
  --color-red-dark: #A81E1E;  /* hover/active state for red */
  --color-blue:     #0038A8;  /* Flag Blue — secondary: eyebrows, links */
  --color-gold:     #FCD116;  /* Calamansi Gold — rules/dividers/highlights ONLY, never text */
  --color-green:    #2E7D32;  /* Banana Leaf — sparing accents, success states */
  --color-cream:    #FBF1D9;  /* Steamed Rice — default page background */
  --color-char:     #1A160E;  /* Charcoal — body text, keylines, dark sections */
  --color-white:    #FFFFFF;  /* card surfaces on cream */

  /* — Typography — */
  /* Load: https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;600;700&display=swap */
  --font-display: "Anton", "Arial Narrow", sans-serif;      /* headings, display */
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif; /* everything else */

  --text-xs:   0.8125rem;  /* 13px — captions, fine print */
  --text-sm:   0.9375rem;  /* 15px — secondary copy */
  --text-base: 1.0625rem;  /* 17px — body */
  --text-lg:   1.3125rem;  /* 21px — lead paragraphs */
  --text-xl:   1.75rem;    /* 28px — h3 */
  --text-2xl:  2.375rem;   /* 38px — h2 */
  --text-3xl:  3.5rem;     /* 56px — h1 desktop (scale down to ~40px mobile) */
  --tracking-label: 0.14em; /* wide letter-spacing for all-caps Barlow labels */

  /* — Spacing (8px base) — */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 8vw, 6rem); /* vertical rhythm between sections */

  /* — Shape & borders (the brand's sticker-like card style) — */
  --radius-card: 16px;
  --radius-btn:  10px;
  --border-card: 2px solid var(--color-char);
  --shadow-card: 6px 6px 0 rgba(26, 22, 14, 0.12); /* hard offset, no blur */

  /* — Layout — */
  --max-width: 1120px;
}