/* ============================================
   LIVING ON PURPOSE — DESIGN TOKENS
   Brand variables, font definitions.
   Edit this file to change the look across the entire site.
   ============================================ */

/* --------------------------------------------
   FONT DEFINITIONS
   Files live in /assets/fonts/
   -------------------------------------------- */

/* Gordita — workhorse (body, UI, sub-heads) */
@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Optima — signature (hero headlines, editorial moments) */
@font-face {
  font-family: 'Optima';
  src: url('../fonts/Optima.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optima';
  src: url('../fonts/Optima-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Optima';
  src: url('../fonts/Optima-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Optima';
  src: url('../fonts/Optima-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------
   DESIGN TOKENS
   -------------------------------------------- */
:root {
  /* ---------- BRAND COLORS (from official LOP brand kit) ---------- */
  --lop-orange:        #E8530A;   /* primary accent, CTAs, highlights */
  --lop-orange-hover:  #C84408;   /* slightly darker for hover */
  --lop-forest:        #1E4D3B;   /* dark anchor, serious sections */
  --lop-forest-hover:  #143427;
  --lop-sage:          #8DB5B0;   /* supporting tone */
  --lop-cream:         #F5F0E8;   /* base background */
  --lop-cream-hover:   #ECE5D8;
  --lop-brown:         #3D3018;   /* text on cream, dark anchor */

  /* Aliased neutrals */
  --lop-white:         #FFFFFF;
  --lop-black:         #181410;
  --lop-grey-line:     rgba(61, 48, 24, 0.12);  /* subtle dividers */

  /* Tonal cream — exact match to logo PNG backgrounds (#FAF2E5).
     Use for the sponsor carousel section so logos blend cleanly. */
  --lop-cream-warm:    #FAF2E5;

  /* ---------- SEMANTIC COLORS ---------- */
  --color-bg:          var(--lop-cream);
  --color-text:        var(--lop-brown);
  --color-heading:     var(--lop-forest);
  --color-accent:      var(--lop-orange);
  --color-link:        var(--lop-orange);
  --color-link-hover:  var(--lop-orange-hover);

  /* ---------- TYPOGRAPHY ---------- */
  /* Workhorse font: Gordita */
  --font-body:    'Gordita', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  /* Signature font: Optima — used for hero/headlines and italic editorial moments */
  --font-display: 'Optima', 'Palatino', 'Hoefler Text', Georgia, serif;

  /* Type scale (mobile-first — phones tighten everything down) */
  --text-xs:     0.75rem;     /* 12px */
  --text-sm:     0.875rem;    /* 14px — captions */
  --text-base:   1rem;        /* 16px — body */
  --text-md:     1.0625rem;   /* 17px — large body */
  --text-lg:     1.25rem;     /* 20px — sub-heads */
  --text-xl:     1.5rem;      /* 24px — h3 */
  --text-2xl:    1.875rem;    /* 30px — h2 */
  --text-3xl:    2.25rem;     /* 36px — large h2 */
  --text-4xl:    2.75rem;     /* 44px — section hero */
  --text-5xl:    3.5rem;      /* 56px — hero h1 (tight on mobile) */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;     /* eyebrows / wordmark */

  /* ---------- SPACING SCALE ---------- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ---------- LAYOUT ---------- */
  --container-narrow: 760px;     /* true editorial reading width */
  --container:        1280px;    /* default — most content sections */
  --container-wide:   1480px;    /* feature rows, hero areas */
  --container-xwide:  1640px;    /* very wide editorial spreads, full-bleed */
  --gutter:           var(--space-5);
  --gutter-lg:        var(--space-7);

  /* ---------- BORDERS / RADIUS ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* ---------- TRANSITIONS ---------- */
  --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   500ms ease;

  /* ---------- ELEVATIONS ---------- */
  --shadow-sm: 0 1px 2px rgba(24, 20, 16, 0.08);
  --shadow:    0 4px 12px rgba(24, 20, 16, 0.10);
  --shadow-lg: 0 12px 32px rgba(24, 20, 16, 0.14);

  /* ---------- HEADER ---------- */
  --header-height: 80px;
  --announcement-height: 44px;
}

/* ---------- DESKTOP TYPE SCALE (>= 768px) ---------- */
@media (min-width: 768px) {
  :root {
    --text-md:    1.125rem;   /* 18px */
    --text-lg:    1.5rem;     /* 24px */
    --text-xl:    2rem;       /* 32px */
    --text-2xl:   2.75rem;    /* 44px */
    --text-3xl:   3.75rem;    /* 60px — h2 */
    --text-4xl:   5rem;       /* 80px */
    --text-5xl:   7rem;       /* 112px — hero h1 */
  }
}