/* ==========================================================================
   IndoSpiceHub — Design Tokens
   A Global Brand by PT Alam Jaya Mulia

   These custom properties are the single source of truth for the visual
   system. New product lines, new languages, new pages — everything is
   built on top of these tokens so the brand stays consistent as the
   site scales past today's five commodities.
   ========================================================================== */

:root {

  /* ---- Color: Brand ----
     Forest green carries trust and origin (Indonesian plantations).
     Gold marks premium grade and is used sparingly, never as a fill.
     Ivory is the resting surface — warmer and more expensive-feeling
     than pure white, evoking paper, manifests, certificates of origin. */
  --color-forest-900: #14271D;   /* deepest, used for text-on-ivory headings */
  --color-forest-700: #1F3D2E;   /* primary brand green */
  --color-forest-500: #2F5642;   /* mid green, hovers / secondary fills */
  --color-forest-100: #E3EAE4;   /* tinted green for subtle section backgrounds */

  --color-gold-600:   #A07B2E;   /* deep gold, for text on light surfaces */
  --color-gold-500:   #B8924A;   /* primary gold accent */
  --color-gold-200:   #E8D9B8;   /* pale gold, hairlines on dark surfaces */

  --color-ivory:      #F7F4EC;   /* primary background */
  --color-ivory-deep: #EFE9DB;   /* secondary background / card surface */
  --color-charcoal:   #1A1A18;   /* primary text, near-black with warmth */
  --color-charcoal-60:#1A1A18AD; /* secondary text — tuned for ≥4.5:1 contrast on ivory and white */
  --color-white:      #FFFFFF;

  /* ---- Color: Functional ---- */
  --color-border:        #DCD4C0;
  --color-border-dark:   #3A4F40;
  --color-overlay-dark:  rgba(20, 39, 29, 0.72);  /* hero image scrim */
  --color-success:       #3E6B4F;
  --color-focus:         #B8924A;

  /* ---- Hero overlay tints ----
     Space-separated RGB triplets (not hex) so components.css can apply
     them at any alpha via rgb(var(--hero-tint) / alpha) — one value per
     page, all mixed from the existing brand palette rather than
     introducing new hues. Each page sets --hero-tint via a .page-hero
     modifier class; homepage forest is the default. */
  --tint-forest:      20 39 29;    /* Homepage — Forest Green (= forest-900) */
  --tint-walnut:      58 42 31;    /* About — Warm Walnut */
  --tint-olive:       42 45 27;    /* Products — Deep Olive */
  --tint-forest-rich: 11 22 16;    /* Export Capability — Rich Forest (deepened) */
  --tint-charcoal:    30 29 25;    /* Knowledge Center — Soft Charcoal (warm) */
  --tint-forest-warm: 33 41 26;    /* Contact — Warm Forest (forest + gold undertone) */

  /* Overlay strength — desktop default; scaled up for tablet/mobile below
     so text stays legible over brighter hero photography at every size. */
  --hero-overlay-alpha: 0.46;      /* desktop: 40–50% */

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid type scale — clamps keep headings elegant from mobile to wide desktop */
  --text-eyebrow:  0.8125rem;                          /* 13px, fixed */
  --text-body:     1rem;                                /* 16px */
  --text-body-lg:  clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h6:       clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-h5:       clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-h4:       clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --text-h3:       clamp(2.1rem, 1.8rem + 1.6vw, 2.875rem);
  --text-h2:       clamp(2.5rem, 2rem + 2.4vw, 3.75rem);
  --text-h1:       clamp(2.75rem, 1.9rem + 4.2vw, 5.75rem);

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.6;

  --tracking-eyebrow: 0.18em;
  --tracking-tight:   -0.01em;

  /* ---- Spacing — 8px base rhythm ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;
  --space-7: 7.5rem;
  --space-8: 9.5rem;
  --space-9: 13rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --radius-sm: 2px;   /* near-zero radius — this brand does not round corners */
  --radius-md: 4px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(20,39,29,0.06), 0 12px 32px rgba(20,39,29,0.08);
  --shadow-hover: 0 4px 8px rgba(20,39,29,0.08), 0 24px 48px rgba(20,39,29,0.12);

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* Hero overlay strength scales up as viewport narrows — smaller screens
   crop hero photography tighter (more sky, more bright midtone), so the
   same alpha that reads correctly on desktop looks under-covered on
   mobile. Order matters: mobile query sits last so it wins at narrow
   widths where both would otherwise match. */
@media (max-width: 1023px) {
  :root { --hero-overlay-alpha: 0.58; }   /* tablet: 50–60% */
}
@media (max-width: 639px) {
  :root { --hero-overlay-alpha: 0.72; }   /* mobile: 60–75% */
}