/* tokens.css — Design tokens and typography utility classes */

/* Archivo carries every piece of body/utility text (see --font-archivo below).
   Loaded here rather than per-page so one <link rel=stylesheet> covers the
   whole site, admin panel included. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700&display=swap');

/* Maiandra Black, self-hosted. Registered across the whole weight range so the
   black cut answers every font-weight the type classes ask for (they all set
   400) — there is no lighter cut in the family on purpose. */
@font-face {
  font-family: 'Maiandra Black';
  src: url('/fonts/maiandra-black.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maiandra Black';
  src: url('/fonts/maiandra-black-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Maiandra (regular cut) for the RangMudra name only, matching the logo.
   Registered at 400 alone on purpose: the name is set in <b>, and the browser
   emboldens this regular cut rather than reaching for Maiandra Black. */
@font-face {
  font-family: 'Maiandra';
  src: url('/fonts/maiandra-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primary (tan / gold) */
  --pr-100: #C2A27C;
  --pr-b1:  rgba(0, 0, 0, 0.2);
  --pr-b2:  #7C684F;
  --pr-b3:  #63533F;
  --pr-l1:  #CEB596;
  --pr-l2:  #D8C4AB;
  --pr-l3:  #E0D0BC;
  --pr-l5:  #ECE3D7;

  /* Secondary (chocolate) */
  --sc-100: #2C1A10;
  --sc-l1:  #413128;
  --sc-l3:  #655851;
  --sc-l4x: #A9A19D;

  /* Accent (sage — reserved) */
  --ac-100: #81997A;
  --ac-b1:  #677A62;
  --ac-b2:  #52624E;
  --ac-b3:  #424E3E;
  --ac-l1:  #9AAD95;
  --ac-l2:  #AEBDAA;
  --ac-l3:  #BECABB;

  /* Neutrals */
  --w1: #FFFFFF;
  --b1: #000000;
  --b2: #191919;
  --b3: #454545;
  --b4: #8F8F8F;

  /* Error (TBD — temporary) */
  --error: #B44444;

  /* Typography families.
     Maiandra Black is the Rangmudra display face — headings, banners, section
     and sub-section names, the wordmark. It is a single heavy cut, and running
     body copy in it reads as bold and is hard to scan, so all utility text is
     back on Archivo Regular. The token names are kept as-is because the whole
     stylesheet and the spec in CLAUDE.md reference them.
     The fallbacks render the rupee sign, arrows and check marks, which Maiandra
     Black has no glyphs for. */
  --font-italiana: 'Maiandra Black', Helvetica, Arial, sans-serif;
  --font-archivo:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* The brand name, wherever it appears — see .brand-name. */
  --font-brand:    'Maiandra', 'Maiandra Black', Helvetica, Arial, sans-serif;

  /* Layout */
  --max-content: 1280px;
  /* Full-bleed artwork stops growing here and the band's own background fills
     the rest, so a photo is never stretched across an ultra-wide monitor. */
  --max-media: 1600px;
  /* The layout stops compressing at this width; narrower than this the page
     scrolls sideways rather than squashing the design further. */
  --min-page: 360px;
  --gutter-desktop: 48px;
  --gutter-tablet: 32px;
  --gutter-mobile: 20px;
  --section-v-desktop: 120px;
  --section-v-tablet: 80px;
  --section-v-mobile: 56px;

  /* Shadows */
  --shadow-card:    0 1px 2px rgba(44, 26, 16, 0.04), 0 4px 12px rgba(44, 26, 16, 0.04);
  --shadow-hover:   0 8px 24px rgba(44, 26, 16, 0.08);
  --shadow-dropdown:0 8px 32px rgba(44, 26, 16, 0.12);

  /* Motion */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate:cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:      200ms;
  --dur-standard:   400ms;
  --dur-hero:       800ms;
}

/* ─── Typography utility classes ─────────────────────────────────────────── */

.h1-i {
  font-family: var(--font-italiana);
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.h2-i {
  font-family: var(--font-italiana);
  font-size: 40px;
  line-height: 56px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.h3-i {
  font-family: var(--font-italiana);
  font-size: 32px;
  line-height: 48px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.h4-i {
  font-family: var(--font-italiana);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.h5-i {
  font-family: var(--font-italiana);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* 15% tracking is the brand's voice on SHORT all-caps utility text (h6/h7 —
   nav links, eyebrows, captions). At paragraph length it pulls words apart and
   is what makes running copy hard to read, so the two body sizes are tightened.
   Everything is still Archivo Regular — never a bold cut. */
.h4-a {
  font-family: var(--font-archivo);
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0.06em;
  font-weight: 400;
}

.h5-a {
  font-family: var(--font-archivo);
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.02em;
  font-weight: 400;
}

.h6-a {
  font-family: var(--font-archivo);
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 0.15em;
  font-weight: 400;
}

.h7-a {
  font-family: var(--font-archivo);
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.15em;
  font-weight: 400;
}

/* ─── Mobile typography overrides ────────────────────────────────────────── */

@media (max-width: 767px) {
  .h1-i { font-size: 36px; line-height: 44px; }
  .h2-i { font-size: 30px; line-height: 38px; }
  .h3-i { font-size: 26px; line-height: 34px; }
  .h4-i { font-size: 20px; line-height: 28px; }
  .h4-a { font-size: 18px; line-height: 26px; }
  .h5-i, .h5-a { font-size: 15px; line-height: 22px; }
  .h6-a { font-size: 11px; line-height: 18px; }
}

/* ─── Focus ring ──────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--pr-b2);
  outline-offset: 2px;
}

/* The RangMudra name, as drawn in the logo: Maiandra regular, emboldened by
   the <b> it is always set in, mixed case (R and M capitals). Resets the
   tracking and casing of whatever heading or label it sits inside. js/brand.js
   wraps occurrences in CMS-driven copy the same way. */
.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: none;
}