/* ==========================================================================
   Lake Group - CANONICAL DESIGN TOKENS (assets/tokens.css)
   ==========================================================================
   Single source of truth for shared chrome (navbar, hero shell, brand color,
   type stacks, logo sizing). Imported by theme.css AND flagship.css so both
   stacks resolve the same values.

   Citations:
     · Brand blues / yellow / white - Lake Brand Design Guidelines 2023 PDF
       (Logo Colors + Brand Colors pages): Deep Blue #0181BB, Light Blue
       #0599D3, Sunrise Yellow #FFF200, White #FFFFFF.
     · Candy Red #D21404 is in the same PDF but intentionally OMITTED here
       per locked user decision (no red on the website).
     · Lacoste Sans (Badani) is the print/guidelines typeface — exclusive,
       not licensed as a webfont. Jost (OFL, via @fontsource) is the closest
       free geometric stand-in: Regular body, Bold display/headings.
     · Navbar height, logo height, nav link metrics, active pill - home
       (index.html) + prior 60px logo standard (~17% below former 72px).
   ========================================================================== */

:root {
  /* - Brand palette (docs) - */
  --lake-deep-blue:          #0181BB;
  --lake-light-blue:         #0599D3;
  --lake-yellow:             #FFF200;
  --lake-white:              #FFFFFF;
  --color-brand-blue:        var(--lake-deep-blue); /* Deep Blue */
  --color-brand-blue-light:  var(--lake-light-blue); /* Light Blue */
  --color-brand-blue-deep:   var(--lake-deep-blue); /* semantic deep-blue surface */
  --color-brand-blue-darkest:var(--lake-deep-blue); /* semantic deep-blue surface */
  --color-yellow-accent:     var(--lake-yellow); /* Sunrise Yellow */
  --color-yellow-deep:       var(--color-yellow-accent);
  --color-yellow-muted:      var(--color-yellow-accent);
  --color-white:             var(--lake-white);
  --color-offwhite:          #F7F8FC;
  --color-light:             #EFF2FB;

  /* Lake Agro brand greens (sampled from lakeagro.com style.css + logo) */
  --color-agro-green:         #008435; /* primary / CTAs / links */
  --color-agro-green-mid:     #006b2b; /* mid surfaces / scrolled nav */
  --color-agro-green-deep:    #004b1e; /* headers / dark bands / ink */
  --color-agro-green-bright:  #489f10; /* light accent / highlights */
  --color-agro-orange:        #e67e22; /* harvest accent (replaces sunrise yellow on agro) */
  --color-agro-orange-deep:   #c96a1a;
  --color-agro-ink:           #012814; /* near-black forest for dense chrome */
  --color-agro-paper:         #f3f6f1; /* light section wash */
  --color-agro-paper-2:       #e8efe6;

  /* - Text - */
  --color-text-heading:      var(--color-brand-blue);
  --color-text-body:         #5A6478;
  --color-text-on-brand:     #FFFFFF;
  --color-text-on-brand-muted: rgba(255, 255, 255, 0.85);

  /* - Type stacks (Jost = closest free Lacoste stand-in; not identical) - */
  /* Jost first for all Latin (en/sw/fr/pt/es + accents via latin + latin-ext).
     Arabic (ar) / Hindi (hi): Noto/system AFTER Jost so Latin letters still
     prefer Jost; Arabic/Devanagari glyphs use the script fallbacks. */
  --font-heading: "Jost", "Noto Sans Arabic", "Noto Naskh Arabic",
                  "Noto Sans Devanagari", "Segoe UI", "Arial", sans-serif;
  --font-body:    "Jost", "Noto Sans Arabic", "Noto Naskh Arabic",
                  "Noto Sans Devanagari", system-ui, -apple-system,
                  BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   "Playfair Display", "Jost", Georgia, serif;
  --font-heading-weight: 700; /* Bold — guidelines: Lacoste Bold for headlines */
  --font-body-weight:    400; /* Regular — guidelines: Lacoste Regular for body */

  /* - Chrome geometry - */
  --navbar-height:              72px;
  --navbar-height-scrolled:     60px;
  --nav-logo-height:            38px; /* ~53% of 72px bar — compact */
  --nav-logo-height-scrolled:   30px;
  /* Optical note: square letterboxed assets were trimmed; scale remains for any leftover 1:1 marks */
  --nav-logo-letterbox-scale:   1.15;
  /* Footer mark: visual weight near nav */
  --footer-logo-height:            34px;
  --footer-logo-height-mobile:     28px;
  --color-navbar-bg:            var(--color-brand-blue);
  --color-navbar-bg-scrolled:   rgba(1, 129, 187, 0.96);
  --color-navbar-border:        var(--color-yellow-accent);
  --color-hero-bg:              var(--color-brand-blue); /* fallback under photo only */
  /* Very subtle left-side Lake-blue tint behind text only. Fade to transparent
     before the hero midpoint — image remains bright and natural elsewhere. */
  --hero-overlay-gradient:      linear-gradient(to right,
                                  rgba(1, 129, 187, 0.09) 0%,
                                  rgba(1, 129, 187, 0.04) 28%,
                                  rgba(1, 129, 187, 0.01) 42%,
                                  transparent 55%);

  /* - Nav link metrics (home sentence-case + soft pill) - */
  /* Slightly larger than Bebas-era 0.84rem — Jost needs a touch more size at UI scale */
  --nav-link-size:           0.875rem;
  --nav-link-weight:         500;
  --nav-link-letter-spacing: normal;
  --nav-link-transform:      none;
  --nav-link-padding:        9px 14px;
  --nav-link-radius:         999px;
  --nav-link-color:          #FFFFFF;
  --nav-link-hover-bg:       rgba(255, 255, 255, 0.16);
  --nav-link-active-color:   #FFFFFF;
  --nav-link-active-bg:      var(--color-brand-blue-light); /* canonical Lake light-blue active state */
  --nav-link-active-outline: 1px solid rgba(255, 255, 255, 0.9);

  /* - Eyebrow / breadcrumb (interior heroes) - */
  --eyebrow-size:            0.75rem;
  --eyebrow-letter-spacing:  0.16em; /* was 0.12–0.32; Jost + wide tracking reads loose */
  --eyebrow-weight:          700;
  --breadcrumb-size:         0.75rem;
  --breadcrumb-letter-spacing: 0.14em;

  /* - Buttons - */
  --btn-padding:             13px 28px;
  --btn-size:                0.875rem;
  --btn-weight:              600;
  --btn-radius:              4px;
  --btn-primary-bg:          var(--color-yellow-accent);
  --btn-primary-color:       var(--color-brand-blue-darkest);

  /* ========================================================================
     Type scale (Jost) — single source for theme.css + flagship.css
     Bebas Neue was condensed; same px looked billboard-large on Jost.
     Clamps keep presence on desktop without oversized mobile/tablet titles.
     ======================================================================== */
  --fs-hero:    clamp(2rem, 5vw, 4.25rem);       /* page / home heroes */
  --fs-display: clamp(1.7rem, 3.6vw, 3.1rem);    /* section titles / h2 */
  --fs-h1:      var(--fs-hero);
  --fs-h2:      var(--fs-display);
  --fs-title:   clamp(1.35rem, 2.5vw, 2.1rem);   /* h3 / card titles */
  --fs-h3:      var(--fs-title);
  --fs-lede:    clamp(1.05rem, 1.35vw, 1.2rem);  /* supporting / hero sub */
  --fs-body:    1.0625rem;                       /* ~17px reading size */
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --fs-stat:    clamp(2.5rem, 4.8vw, 4.25rem);
  /* Company short-name heroes (calmer than full --fs-hero) */
  --fs-hero-company: clamp(2rem, 4.6vw, 3.6rem);

  /* - Body type - */
  --body-size:               17px;
  --body-line-height:        1.65;
  --title-letter-spacing:    -0.02em;   /* Jost display: slight tighten */
  --display-letter-spacing:  -0.01em;
  --display-line-height:     1.05;     /* was ~0.95 for condensed Bebas */

  /* - Borders / elevation - */
  --color-border:            rgba(1, 129, 187, 0.12);
  --radius:                  4px;
  --radius-lg:               10px;
  --shadow:                  0 2px 16px rgba(1, 63, 92, 0.08);
  --shadow-md:               0 6px 28px rgba(1, 63, 92, 0.12);
  --shadow-lg:               0 14px 48px rgba(1, 63, 92, 0.18);

  /* ========================================================================
     Legacy aliases - keep every existing var(--blue)/var(--yellow)/etc. working
     ======================================================================== */
  --blue:       var(--color-brand-blue);
  --blue-light: var(--color-brand-blue-light);
  --blue2:      var(--lake-light-blue);
  --blue3:      var(--color-brand-blue-darkest);
  --blue-deep:  var(--color-brand-blue-deep);
  --yellow:     var(--color-yellow-accent);
  --yellow2:    var(--color-yellow-deep);
  --yellow3:    var(--color-yellow-muted);
  --gold:       var(--color-yellow-accent);
  --gold-deep:  var(--color-yellow-muted);
  --white:      var(--color-white);
  --offwhite:   var(--color-offwhite);
  --light:      var(--color-light);
  --text:       var(--color-text-heading);
  --muted:      var(--color-text-body);
  --mute:       var(--color-text-body);
  --border:     var(--color-border);

  --nav-h:                 var(--navbar-height);
  --nav-logo-h:            var(--nav-logo-height);
  --nav-logo-h-scrolled:   var(--nav-logo-height-scrolled);

  /* Legacy navy/amber remap → brand (no candy red) */
  --navy:   var(--color-brand-blue);
  --navy2:  var(--color-brand-blue-deep);
  --navy3:  var(--color-brand-blue-darkest);
  --amber:  var(--color-yellow-muted);
  --amber2: var(--color-yellow-deep);
  --amber3: var(--color-yellow-accent);
  --bone:   var(--color-offwhite);
  --bone2:  var(--color-light);

  /* Type aliases used by flagship */
  --font-display: var(--font-heading);
}

/* Tablet: nudge display hierarchy down so Jost doesn’t dominate mid-widths */
@media (max-width: 960px) {
  :root {
    --fs-hero:    clamp(1.9rem, 5.5vw, 3.5rem);
    --fs-display: clamp(1.55rem, 3.8vw, 2.6rem);
    --fs-title:   clamp(1.3rem, 2.8vw, 1.9rem);
    --fs-stat:    clamp(2.25rem, 5.5vw, 3.5rem);
    --fs-hero-company: clamp(1.85rem, 5vw, 3.1rem);
    --nav-link-size: 0.86rem;
  }
}

@media (max-width: 720px) {
  :root {
    --nav-logo-letterbox-scale: 1.35;
    --fs-hero:    clamp(1.85rem, 7.2vw, 2.75rem);
    --fs-display: clamp(1.45rem, 5.5vw, 2.15rem);
    --fs-title:   clamp(1.25rem, 4.2vw, 1.7rem);
    --fs-lede:    1.05rem;
    --fs-stat:    clamp(2.1rem, 8vw, 2.85rem);
    --fs-hero-company: clamp(1.75rem, 6.5vw, 2.5rem);
    --nav-link-size: 0.9rem; /* mobile drawer / pill legibility */
    --eyebrow-size: 0.72rem;
    --breadcrumb-size: 0.72rem;
    --body-size: 16px;
    --body-line-height: 1.7;
  }
}

/* Arabic / Hindi: Noto fallbacks + denser scripts — calm oversized display clamps */
html[lang="ar"],
html[lang="hi"] {
  --fs-hero:    clamp(1.85rem, 4.5vw, 3.5rem);
  --fs-display: clamp(1.5rem, 3.2vw, 2.65rem);
  --fs-title:   clamp(1.25rem, 2.2vw, 1.9rem);
  --fs-lede:    clamp(1.05rem, 1.3vw, 1.175rem);
  --fs-stat:    clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-hero-company: clamp(1.75rem, 4.2vw, 3rem);
  --title-letter-spacing: 0;
  --display-letter-spacing: 0;
  --display-line-height: 1.15;
  --eyebrow-letter-spacing: 0.08em;
  --breadcrumb-letter-spacing: 0.08em;
  --body-line-height: 1.8;
}

html[lang="ar"] {
  --body-line-height: 1.85;
  --fs-body: 1.0625rem;
}

html[lang="hi"] {
  --body-line-height: 1.75;
}

@media (max-width: 720px) {
  html[lang="ar"],
  html[lang="hi"] {
    --fs-hero:    clamp(1.7rem, 6.5vw, 2.45rem);
    --fs-display: clamp(1.35rem, 5vw, 1.95rem);
    --fs-title:   clamp(1.2rem, 4vw, 1.55rem);
    --fs-hero-company: clamp(1.6rem, 6vw, 2.25rem);
  }
}