/* =========================================================================
   HAWAIIAN STYLE — Design Tokens
   Tropical suncare from Thailand, est. 1995.
   "Analog Life, Born for Sunshine." Retro fun, modern sun.
   Visual DNA: paper-cream backgrounds, hot orange/yellow accents,
   deep brown ink, ocean-blue and aloe-green for atmosphere.
   Hard solid-color shadow offsets. Film grain overlay. Vintage stamps.
   ========================================================================= */

/* Fonts per official Hawaiian Style Brand Context File §12:
   EN Display = Impact / Presley Slap         → Anton (free Impact-alike)
   EN Heading/Sub/Body = Montserrat            → Montserrat (loaded)
   TH Display/Heading = Noto Sans Thai Condensed → Noto Sans Thai (cond. weight)
   TH Body = Noto Sans Thai
   + accent: Caveat Brush (script accent, brand-approved retro stamp use)
   + utility: JetBrains Mono for meta labels */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Caveat+Brush&family=Montserrat:wght@400;500;600;700;800;900&family=Noto+Sans+Thai:wght@400;500;700&family=Noto+Sans+Thai+Looped:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =====================================================================
     CORE PALETTE — Hawaiian Style Brand Book §11 (Color Scheme)
     Includes Pantone, CMYK, and RGB for print fidelity.

       --orange  #D8721D  RGB 231,107,0   CMYK  5,71,100,0  Pantone 1505 C  PRIMARY
       --blue    #465975  RGB  65,90,120  CMYK 81,62,34,14  Pantone 7694 C  SECONDARY
       --brown   #3D2F23  RGB  64,46,33   CMYK 54,66,76,63  Pantone 7554 C
       --sun     #F7DF4D  RGB 255,255,80  CMYK  5, 0,79, 0  Pantone 3945 C
       --beige   #FCD5B6  RGB 255,210,176 CMYK  0,20,30, 0  Pantone  489 C

     Official color proportions (per §Color Proportion, p18):
       30% · 30% · 20% · 15% · 5%  (largest to smallest by surface area)
     ===================================================================== */

  /* Paper / cream surfaces (page backgrounds) */
  --paper:       #F5E7CE;     /* primary cream — page bg */
  --paper-soft:  #FAF1DC;     /* lifted cream — cards on paper */
  --paper-warm:  #F4E2C3;     /* deeper paper */

  /* Beige — sandy tones for product cards & gradients */
  --beige:       #FCD5B6;
  --beige-deep:  #F4BE92;
  --beige-shade: #E5A871;

  /* Sun — the brand voice color */
  --sun-soft:    #FFE49B;
  --sun:         #F7DF4D;     /* sunshine yellow */
  --orange:      #D8721D;     /* the primary brand color — CTA, accents */
  --orange-deep: #B85C12;     /* hover / shadow underside */
  --orange-dark: #8E4A10;     /* deep press */

  /* Brown — ink, packaging cap, brand serious moments */
  --brown:       #3D2F23;     /* primary text ink */
  --brown-soft:  #5C4634;     /* secondary text */
  --brown-mid:   #7A6450;     /* muted text */
  --brown-line:  rgba(61, 47, 35, 0.18);
  --brown-line-soft: rgba(61, 47, 35, 0.10);

  /* Ocean / sky blue */
  --blue:        #465975;
  --blue-deep:   #2E3D52;
  --blue-pale:   #A9BCD3;

  /* Aloe / palm green */
  --aloe:        #7D9A5C;
  --aloe-deep:   #4E6B3A;

  /* Aloha red (After Sun cap) */
  --aloha:       #C8362C;

  /* =====================================================================
     SEMANTIC ALIASES
     ===================================================================== */

  /* Surfaces */
  --bg:          var(--paper);
  --bg-alt:      var(--paper-soft);
  --bg-warm:     var(--paper-warm);
  --bg-inverse:  var(--brown);
  --surface:     var(--paper-soft);
  --surface-ink: var(--brown);

  /* Foreground */
  --fg:          var(--brown);
  --fg-soft:     var(--brown-soft);
  --fg-muted:    var(--brown-mid);
  --fg-inverse:  var(--paper);
  --fg-on-sun:   var(--brown);
  --fg-on-orange:var(--paper);

  /* Lines */
  --line:        var(--brown-line);
  --line-soft:   var(--brown-line-soft);
  --line-ink:    var(--brown);

  /* Action */
  --accent:        var(--orange);
  --accent-hover:  var(--orange-deep);
  --accent-press:  var(--orange-dark);
  --accent-warm:   var(--sun);
  --link:          var(--orange);
  --link-hover:    var(--orange-deep);

  /* Status */
  --success:     var(--aloe-deep);
  --warning:     var(--orange);
  --danger:      var(--aloha);
  --info:        var(--blue);

  /* =====================================================================
     TYPOGRAPHY
     - Display:  Anton (Impact-style condensed bold sans) — uppercase
     - Script:   Caveat Brush (chunky brush handwriting) — accents only
     - Body:     Montserrat (geometric sans) — neutral, workhorse
     - Mono:     JetBrains Mono — small labels, index counters, captions
     - Thai:     Noto Sans Thai — bilingual moments
     ===================================================================== */
  --font-display:  'Anton', Impact, 'Helvetica Inserat', 'Arial Narrow', sans-serif;
  --font-script:   'Caveat Brush', 'Brush Script MT', cursive;
  --font-body:     'Montserrat', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --font-thai:     'Noto Sans Thai', sans-serif;

  /* Size scale (rem, base 16) */
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-128: 8rem;
  --fs-168: 10.5rem;

  /* Leading */
  --lh-display: 0.92;  /* Anton tight — packaging-style */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.55;
  --lh-loose:   1.7;

  /* Tracking */
  --tr-display: 0.005em;  /* Anton sits well at near-0 */
  --tr-tight:   -0.01em;
  --tr-base:    0em;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.12em;
  --tr-wider:   0.18em;
  --tr-widest:  0.22em;   /* "BORN FOR SUNSHINE" eyebrow */

  /* =====================================================================
     SPACE
     ===================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* =====================================================================
     SHAPE
     - Cards are SOFT: 18–32px radii dominate
     - Pills (CTAs) are fully rounded (999px)
     - Vintage stamps are perfect circles
     ===================================================================== */
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-2xl:  28px;
  --radius-3xl:  32px;
  --radius-pill: 999px;

  /* =====================================================================
     SHADOWS — two systems
     1. SOFT photographic shadows for hover/lift
     2. HARD solid-color offset shadows (signature retro look)
     ===================================================================== */

  /* Soft */
  --shadow-xs:  0 2px 6px rgba(61, 47, 35, 0.10);
  --shadow-sm:  0 6px 14px -4px rgba(61, 47, 35, 0.18);
  --shadow-md:  0 18px 40px -22px rgba(61, 47, 35, 0.45), 0 4px 10px -4px rgba(61, 47, 35, 0.18);
  --shadow-lg:  0 30px 60px -28px rgba(61, 47, 35, 0.55), 0 8px 18px -6px rgba(61, 47, 35, 0.22);
  --shadow-product: 0 30px 50px -20px rgba(0,0,0,0.4);

  /* Hard — signature stacked solid-color shadow. Use for buttons,
     mascot cards, logo marks. Always anchored on --brown. */
  --shadow-hard-brown:   0 4px 0 var(--brown);
  --shadow-hard-brown-lg:0 6px 0 var(--brown);
  --shadow-hard-paper:   0 4px 0 var(--paper);
  --shadow-hard-paper-lg:0 6px 0 var(--paper);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container:   1320px;
  --gutter:      36px;
  --gutter-sm:   20px;
}

/* =========================================================================
   GLOBAL BASE — apply to body to bootstrap
   ========================================================================= */

body, .body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   SEMANTIC TYPE STYLES — use as classes OR via element selectors
   ========================================================================= */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  margin: 0;
  text-transform: uppercase;
  color: var(--fg);
}

h1, .h1 {
  font-size: clamp(var(--fs-72), 9.5vw, var(--fs-168));
}

h2, .h2 {
  font-size: clamp(var(--fs-56), 6.4vw, var(--fs-128));
}

h3, .h3 {
  font-size: clamp(var(--fs-32), 4.4vw, var(--fs-72));
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--accent);
}

.script-rotate {
  /* The signature look: script accent set on a slight rotation,
     usually paired with an Anton headline. */
  font-family: var(--font-script);
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  display: inline-block;
  transform: rotate(-3deg) translateY(-0.05em);
  line-height: 0.9;
}

.eyebrow {
  /* Bold tracked-out caps with a leading rule. Used above almost every
     section title. */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-11);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1.5px; background: currentColor; display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}

.lede {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

p, .p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.th {
  /* Thai-language line. Brand is bilingual EN/TH. */
  font-family: var(--font-thai);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--fg-soft);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a.link:hover { color: var(--link-hover); }

hr, .rule {
  border: 0;
  border-top: 1.5px solid var(--line);
}

/* =========================================================================
   FILM GRAIN OVERLAY — one of the brand's signature effects.
   Apply by adding class="grain" to <body> (or any element with position:relative).
   ========================================================================= */

.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.24;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Sun-bleached horizontal striations — apply behind page content for
   that printed-on-newsprint feel. */
.bleach-lines::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: repeating-linear-gradient(0deg, rgba(61,47,35,0.02) 0 1px, transparent 1px 5px);
}