/* Republic Golf Co. design tokens
   Single source of truth for color, type, space, and motion.
   Brand values come from reference/brand/REPUBLICGOLFCO-STYLE GUIDE.pdf
   and the inline CSS of reference/old-site. Nothing else may hardcode a hex. */

:root {
  /* Brand colors (style guide) */
  --green: #1F3A2E;
  --gold:  #C9A876;
  --blue:  #A8C4D4;
  --cream: #F4EEE4;   /* equals gold at a 20 percent tint */

  /* Tints from the style guide (60 and 20 percent ink over white) */
  --green-60: #798982;
  --green-20: #D2D8D5;
  --gold-60:  #DFCBAD;
  --gold-20:  #F4EEE4;
  --blue-60:  #CBDCE5;
  --blue-20:  #EEF3F6;

  /* Secondary values carried over from the old site */
  --ink:       #2C3F35;   /* body text on cream */
  --ink-soft:  #4A5D52;   /* secondary text */
  --muted:     #5E6E64;   /* captions, helper text. Darkened from the old site 6B7D72 to pass AA on cream */
  --rule:      #D8D2C4;   /* hairlines on cream */
  --error:     #9C3A26;
  --gold-text: #7C5E31;   /* the only gold allowed as text on cream surfaces: 5.2:1 on cream, 4.7:1 on cream-deep. Brand gold is 1.95:1 and is decorative on cream */
  --white:     #FFFFFF;

  /* Derived surfaces */
  --green-deep:     #16291F;                /* footer, hero scrim */
  --cream-deep:     #EBE3D4;                /* alternating bands */
  --shadow-color:   31 58 46;               /* rgb of green for rgba shadows */
  --shadow-sm: 0 1px 2px rgb(var(--shadow-color) / 0.08);
  --shadow-md: 0 8px 24px rgb(var(--shadow-color) / 0.10);
  --shadow-lg: 0 20px 48px rgb(var(--shadow-color) / 0.16);

  /* Text on surfaces. Cream on gold fails AA, so gold surfaces carry green text. */
  --on-cream: var(--ink);
  --on-green: var(--cream);
  --on-gold:  var(--green);
  --on-blue:  var(--green);

  /* Type */
  --font: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* handwritten accent only, never body or headings */
  --font-script: "Allison", "Snell Roundhand", "Brush Script MT", cursive;
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* Fluid type scale, 390px phone to 1440px desktop */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-md:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-2xl:  clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --fs-hero: clamp(2.75rem, 1.5rem + 6vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --ls-caps:  0.08em;
  --ls-wide:  0.03em;
  --ls-tight: -0.01em;

  /* Space, 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter:  clamp(1.25rem, 0.8rem + 2.5vw, 3rem);

  /* Layout */
  --container: 72rem;      /* 1152px */
  --container-narrow: 44rem;
  --container-wide: 88rem;
  --header-h: 4.5rem;

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --hairline: 1px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* Aspect ratios for images and placeholders */
  --ar-wide: 21 / 9;
  --ar-photo: 16 / 9;
  --ar-classic: 4 / 3;
  --ar-square: 1;
  --ar-portrait: 4 / 5;
}