/* ==========================================================================
   Jaayo Plast — design tokens + Bootstrap theming

   Load order: vendor/bootstrap.min.css → tokens.css → base.css →
   components.css → sections.css

   Bootstrap 5.3 is themed through CSS variables rather than a Sass rebuild,
   so the framework stays a stock, upgradable file and every brand decision
   lives here.

   Concept: "The Flute" — a PP hollow sheet is two flat walls joined by
   vertical ribs. That cross-section is the site's structural grammar.
   ========================================================================== */

/* fonts/fonts.css is linked (and its latin files preloaded) from each page's
   <head> — an @import here would chain a second render-blocking request. */

:root {
  /* ---- Brand colour --------------------------------------------------- */
  --resin:      #edf0ec;  /* page base — cool PP-pellet off-white          */
  --resin-deep: #e2e7e2;  /* recessed bands                                */
  --paper:      #ffffff;  /* raised card surface                           */
  --ink:        #101917;  /* near-black, green-grey cast                   */
  --ink-2:      #3d4a47;  /* secondary text                                */
  --ink-3:      #566662;  /* tertiary / captions (4.8:1 on resin)          */
  --flute:      #c7d0ca;  /* hairlines, rib pattern, dividers              */
  --flute-soft: #dbe1dc;  /* faint rules on light ground                   */
  --accent:     #e8541f;  /* heritage Jaayo orange — CTAs, active rib      */
  --accent-dk:  #b53a0e;  /* accent text on light ground (5.1:1)           */
  --deep:       #0e4f45;  /* circular-economy band                         */
  --deep-2:     #0a3b34;

  /* Product masterbatch colours — used ONLY where they are the data
     (the colour spec module). Not part of the general palette. */
  --pp-white:  #f4f6f4;
  --pp-blue:   #1b57a8;
  --pp-green:  #1f7a45;
  --pp-black:  #14181a;
  --pp-orange: #e8541f;
  --pp-red:    #c0271f;
  --pp-grey:   #7c8a89;
  --pp-silver: #b9c2c4;

  /* ---- Type ----------------------------------------------------------- */
  --font-display: "Archivo", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-hero:    clamp(2.4rem, 5vw, 4.5rem);
  --t-display: clamp(2.2rem, 4.6vw, 3.9rem);
  --t-h2:      clamp(1.75rem, 3.2vw, 2.85rem);
  --t-h3:      clamp(1.2rem, 1.6vw, 1.5rem);
  --t-h4:      clamp(1.02rem, 1.2vw, 1.15rem);
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --t-lead:    clamp(1.08rem, 1rem + 0.42vw, 1.32rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* ---- Space ---------------------------------------------------------- */
  --section-y: clamp(4.25rem, 8.5vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --rib-gutter: 92px;

  /* ---- Form ----------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(16, 25, 23, 0.05);
  --shadow-2: 0 12px 32px -12px rgba(16, 25, 23, 0.18);
  --shadow-3: 0 28px 64px -24px rgba(16, 25, 23, 0.3);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 620ms;

  --header-h: 76px;
}

/* ==========================================================================
   Bootstrap variable overrides
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* Page + text */
  --bs-body-bg: var(--resin);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--t-body);
  --bs-body-line-height: 1.62;
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-color: var(--ink-3);

  /* Headings use the display face */
  --bs-heading-color: var(--ink);
  --bs-font-monospace: var(--font-data);

  /* Brand */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 232, 84, 31;
  --bs-link-color: var(--accent-dk);
  --bs-link-color-rgb: 181, 58, 14;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 232, 84, 31;

  /* Lines */
  --bs-border-color: var(--flute);
  --bs-border-color-translucent: var(--flute);

  /* Corners — rounded throughout. Fabricated PP boxes, crates and reel
     wraps all carry a soft radius at the fold, so this is true to product. */
  --bs-border-radius-sm: 6px;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 20px;
  --bs-border-radius-xl: 20px;
  --bs-border-radius-2xl: 28px;
  --bs-border-radius-pill: 999px;

  /* Container gutters match the site's own rhythm */
  --bs-gutter-x: var(--gutter);

  /* Focus ring in brand orange */
  --bs-focus-ring-color: rgba(232, 84, 31, 0.28);
  --bs-focus-ring-width: 3px;
}

/* Convenience aliases so component CSS can stay readable */
:root {
  --radius-sm: var(--bs-border-radius-sm);
  --radius: var(--bs-border-radius);
  --radius-lg: var(--bs-border-radius-lg);
  --radius-pill: var(--bs-border-radius-pill);
}

/* The flute: the repeating rib pattern taken from the sheet section. */
.u-flute-x {
  background-image: repeating-linear-gradient(90deg, var(--flute) 0 1px, transparent 1px 9px);
}
.u-flute-y {
  background-image: repeating-linear-gradient(0deg, var(--flute) 0 1px, transparent 1px 9px);
}