/* =========================================================================
   Offbeat Service — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Import this file before any other stylesheet.
   ========================================================================= */

/* ---------- Webfonts ----------------------------------------------------- */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/noto-devanagari-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/noto-devanagari-700.woff2') format('woff2');
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* =====================================================================
     BRAND PALETTE — restricted to TWO brand colours (from the logo):
       PRIMARY   = deep navy blue   (structure, headings, dark sections)
       SECONDARY = mint / forest green (actions, accents, highlights)
     plus warm-grey neutrals + silver. No orange, no teal.
     --color-orange-* / --color-teal-* names are retained ONLY as legacy
     aliases (they now resolve to the green scale) so existing rules keep
     working. Prefer --brand-primary / --brand-secondary in new code.
     ===================================================================== */

  /* --- Primary: Navy -------------------------------------------------- */
  --color-navy-900:    #0B2440;   /* footer fills, max contrast text on light */
  --color-navy-800:    #163A5E;   /* PRIMARY DEEP BLUE — brand body (logo navy) */
  --color-navy-700:    #1F4C78;   /* hover for navy fills */
  --color-navy-500:    #50708F;   /* secondary text on light */
  --color-navy-300:    #97A9C0;   /* tertiary text, captions */
  --color-navy-100:    #DCE3EC;   /* subtle dividers on dark / chip fills */

  /* --- Secondary: Green (the brand accent) --------------------------- */
  --color-green-800:   #0F4A2E;   /* deepest — press on dark */
  --color-green-700:   #16633E;   /* press state for primary CTA */
  --color-green-600:   #1E7A4D;   /* PRIMARY CTA / strong accent (AA on white) */
  --color-green-500:   #2E9E66;   /* brand mid — large text, dots, underlines */
  --color-green-300:   #7FC7A1;   /* soft accent */
  --color-green-200:   #C5E8D4;   /* tint backgrounds */
  --color-green-100:   #E7F5ED;   /* subtle highlight fill */

  /* --- Legacy aliases → green (do not use in new code) --------------- */
  --color-orange-700:  var(--color-green-800);
  --color-orange-600:  var(--color-green-700);
  --color-orange-500:  var(--color-green-600);
  --color-orange-200:  var(--color-green-200);
  --color-orange-100:  var(--color-green-100);
  --color-teal-700:    var(--color-green-700);
  --color-teal-600:    var(--color-green-700);
  --color-teal-500:    var(--color-green-600);
  --color-teal-200:    var(--color-green-200);
  --color-teal-100:    var(--color-green-100);

  /* --- Brand semantic handles --------------------------------------- */
  --brand-primary:        var(--color-navy-800);
  --brand-primary-deep:   var(--color-navy-900);
  --brand-secondary:      var(--color-green-600);
  --brand-secondary-soft: var(--color-green-500);
  --color-silver:         #9DB2C4;   /* metallic accent from logo */

  /* --- Neutrals (cool, clean) --------------------------------------- */
  --color-paper:       #F4F7F7;   /* page background — clean cool off-white */
  --color-paper-2:     #E9EFEF;   /* paper, one shade deeper */
  --color-white:       #FFFFFF;   /* panels-against-paper */
  --color-ink:         #0B2440;   /* body text */
  --color-ink-soft:    #2E4257;   /* body text, secondary */
  --color-line:        rgba(22, 58, 94, 0.10);   /* default hairline border */
  --color-line-strong: rgba(22, 58, 94, 0.24);   /* hover/active border */

  /* --- Semantic foreground ------------------------------------------- */
  --fg-1: var(--color-ink);          /* default body */
  --fg-2: var(--color-ink-soft);     /* supporting */
  --fg-3: var(--color-navy-500);     /* tertiary */
  --fg-4: var(--color-navy-300);     /* placeholders */
  --fg-onDark:    #FFFFFF;
  --fg-onDarkDim: rgba(255, 255, 255, 0.72);

  /* --- Semantic background ------------------------------------------- */
  --bg-page:    var(--color-paper);
  --bg-panel:   var(--color-white);
  --bg-sunken:  var(--color-paper-2);
  --bg-dark:    var(--color-navy-800);
  --bg-darker:  var(--color-navy-900);

  /* --- Status -------------------------------------------------------- */
  --color-success: #2F7D5C;
  --color-warning: #C68B12;
  --color-error:   #B23A2E;

  /* --- Typography stacks --------------------------------------------- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-deva:    'Noto Sans Devanagari', 'Lato', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Type scale ---------------------------------------------------- */
  /* Tightened so titles take less vertical space → less scroll. */
  --fs-display-xl: clamp(34px, 5.4vw, 54px);  /* hero — Montserrat 700 */
  --fs-display-lg: clamp(28px, 4.4vw, 42px);  /* section opener */
  --fs-h1:         clamp(26px, 3.8vw, 38px);
  --fs-h2:         clamp(22px, 3vw, 30px);
  --fs-h3:         20px;
  --fs-h4:         17px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    13px;   /* uppercase-tracked label */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.6;
  --lh-tight:   1.3;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;

  /* --- Spacing scale (8-pt) ----------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* --- Radii --------------------------------------------------------- */
  --radius-1:  4px;    /* chips, badges, language pills */
  --radius-2:  8px;    /* form inputs, secondary buttons */
  --radius-3: 12px;    /* primary buttons, small cards */
  --radius-4: 16px;    /* image frames, content cards */
  --radius-5: 24px;    /* hero illustrations, large panels */
  --radius-pill: 999px;/* WhatsApp FAB + avatars ONLY */

  /* --- Shadows ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(14, 42, 71, 0.06), 0 1px 1px rgba(14, 42, 71, 0.04);
  --shadow-2: 0 8px 24px rgba(14, 42, 71, 0.10), 0 2px 6px rgba(14, 42, 71, 0.06);
  --shadow-fab: 0 12px 28px rgba(14, 42, 71, 0.18), 0 4px 8px rgba(14, 42, 71, 0.10);

  /* --- Motion -------------------------------------------------------- */
  --ease-house: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   400ms;

  /* --- Layout chrome ------------------------------------------------- */
  --container-max: 1240px;
  --container-pad: 28px;
  --nav-height-mobile:  64px;
  --nav-height-desktop: 72px;
  --focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-orange-500);
}

/* ---------- Element base styles (semantic) ------------------------------- */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-tight); }

p { margin: 0; max-width: 64ch; text-wrap: pretty; }

a {
  color: var(--color-navy-800);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-house),
              color var(--dur-fast) var(--ease-house);
}
a:hover { text-decoration-thickness: 2px; }

button { font-family: var(--font-body); font-size: var(--fs-body); cursor: pointer; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-2);
}

::selection { background: var(--color-orange-200); color: var(--color-ink); }

/* Utility for the Devanagari script (auto-apply to elements with lang) */
:lang(hi), :lang(mr) { font-family: var(--font-deva); }

/* Section eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-orange-500);
}