/* =========================================================
   CGW Studios: Design Tokens
   Source of truth: landing-pages/brand-kit.txt
   Used by every page under cgw-studios/ (landing pages + home).
   ========================================================= */

:root {
  /* ---------- Color: Primary ---------- */
  --color-green:    #2F4A43;  /* Deep Mineral Green : primary, headings, CTAs */
  --color-stone:    #D8CEC1;  /* Warm Stone : secondary backgrounds */
  --color-charcoal: #2B2B2B;  /* Rich Charcoal : body text, structure */

  /* ---------- Color: Secondary ---------- */
  --color-sand:     #EFE7DD;  /* Soft Sand : large neutral backgrounds */
  --color-bronze:   #8C6B4F;  /* Brushed Bronze : small accents only */
  --color-clay:     #B47C68;  /* Muted Clay : sparing accent */

  /* ---------- Color: Functional aliases ---------- */
  --color-bg:           #FBF9F6;          /* near-sand off-white page bg */
  --color-bg-alt:       var(--color-sand);
  --color-bg-deep:      var(--color-green);
  --color-surface:      #FFFFFF;
  --color-text:         var(--color-charcoal);
  --color-text-muted:   #5A5A57;
  --color-text-on-dark: #F4EFE7;
  --color-text-on-dark-muted: #C9C2B5;
  --color-border:       rgba(43, 43, 43, 0.10);
  --color-border-strong:rgba(43, 43, 43, 0.18);
  --color-accent:       var(--color-bronze);

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (mobile → desktop) */
  --fs-xs:   0.8125rem;                              /* 13px */
  --fs-sm:   0.875rem;                               /* 14px */
  --fs-base: 1rem;                                   /* 16px */
  --fs-md:   1.0625rem;                              /* 17px */
  --fs-lg:   clamp(1.125rem, 0.95rem + 0.6vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.15rem + 0.9vw, 1.625rem);
  --fs-2xl:  clamp(1.75rem,  1.40rem + 1.6vw, 2.25rem);
  --fs-3xl:  clamp(2.25rem,  1.80rem + 2.2vw, 3rem);
  --fs-4xl:  clamp(2.75rem,  2.10rem + 3.0vw, 4rem);
  --fs-5xl:  clamp(3.25rem,  2.40rem + 4.0vw, 5.25rem);

  --lh-tight:  1.10;
  --lh-snug:   1.20;
  --lh-normal: 1.55;
  --lh-relaxed:1.70;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;

  /* ---------- Spacing (8px base) ---------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6rem;      /* 96 */
  --space-12: 8rem;      /*128 */

  /* Section vertical rhythm : fluid */
  --section-y: clamp(4rem, 3rem + 5vw, 7rem);

  /* ---------- Layout ---------- */
  --maxw-content: 1180px;
  --maxw-narrow:  720px;
  --maxw-wide:    1320px;
  --gutter:       clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(43, 43, 43, 0.06);
  --shadow-sm: 0 2px 8px rgba(43, 43, 43, 0.06), 0 1px 2px rgba(43, 43, 43, 0.04);
  --shadow-md: 0 12px 28px -10px rgba(43, 43, 43, 0.18), 0 4px 10px -4px rgba(43, 43, 43, 0.08);
  --shadow-lg: 0 30px 60px -20px rgba(47, 74, 67, 0.35), 0 10px 20px -10px rgba(43, 43, 43, 0.10);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- z-index ---------- */
  --z-header: 50;
  --z-sticky-cta: 40;
  --z-skiplink: 100;
}