/* =========================================================================
   madeinbangladesh.trade — Design System tokens (source of truth)
   Theme: premium export house. Deep-forest dominant, jute-gold accent,
   linen paper, flag-red sun as a rare mark.
   Docs: docs/design-system.md
   ========================================================================= */

/* ---- Self-hosted fonts (latin, variable woff2) ----------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 600;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("/assets/fonts/spline-sans-mono-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: raw palette ------------------------------------------- */
  --forest-900: #072a20; /* deepest surface */
  --forest:     #0b3b2e; /* primary dark surface */
  --forest-700: #0e4a39;
  --green:      #0a5c43; /* brand mid green */
  --green-600:  #0b7050; /* brighter green */

  --jute:        #c79a3b; /* golden fiber accent */
  --jute-bright: #e0b457; /* highlight gold */
  --jute-deep:   #9a7222; /* gold on linen for AA text */

  --linen-050: #fbf8f0; /* lightest paper */
  --linen:     #f4efe2; /* warm paper surface */
  --linen-200: #ece4d1; /* paper shade / cards */

  --ink:   #15201b; /* primary text on linen */
  --stone: #55605a; /* muted text on linen */
  --stone-400: #7d867f;

  --cream:      #f4efe2; /* text on forest */
  --cream-dim:  #c9d3cb; /* muted text on forest */
  --cream-faint:#93a49a; /* faint text on forest */

  --flag-red: #e63a2e; /* the flag's sun — rare accent only */

  --line:          rgba(21, 32, 27, 0.12);   /* hairline on linen */
  --line-strong:   rgba(21, 32, 27, 0.22);
  --line-on-dark:  rgba(244, 239, 226, 0.16); /* hairline on forest */
  --line-on-dark-strong: rgba(244, 239, 226, 0.30);

  /* ---- Color: semantic (default = linen surface) -------------------- */
  --bg: var(--linen);
  --bg-raised: var(--linen-050);
  --fg: var(--ink);
  --fg-muted: var(--stone);
  --accent: var(--jute-deep);      /* AA-safe gold on linen */
  --accent-strong: var(--jute);
  --hairline: var(--line);
  --focus: var(--green-600);

  /* ---- Typography --------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* Fluid type scale (major-third-ish, clamped for mobile→desktop) */
  --text-2xs: 0.6875rem;                              /* 11px labels */
  --text-xs:  0.78rem;
  --text-sm:  0.9rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg:  clamp(1.14rem, 1.05rem + 0.4vw, 1.32rem);
  --text-xl:  clamp(1.35rem, 1.2rem + 0.7vw, 1.72rem);
  --text-2xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --text-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
  --text-4xl: clamp(2.5rem, 1.7rem + 3.6vw, 5.4rem);
  --text-5xl: clamp(2.75rem, 1.4rem + 5.6vw, 6.75rem);

  --leading-tight: 1.02;
  --leading-snug: 1.15;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-label: 0.2em;   /* manifest / eyebrow labels */

  /* ---- Spacing scale (rem, 4px base) -------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* ---- Layout ------------------------------------------------------- */
  --container: 76rem;      /* ~1216px */
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Radius ------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow (warm, low, premium) ---------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 42, 34, 0.06), 0 1px 1px rgba(11, 42, 34, 0.04);
  --shadow-md: 0 8px 24px -12px rgba(11, 42, 34, 0.28), 0 2px 6px rgba(11, 42, 34, 0.06);
  --shadow-lg: 0 30px 60px -28px rgba(7, 42, 32, 0.45), 0 8px 20px -12px rgba(7, 42, 32, 0.22);
  --shadow-gold: 0 10px 30px -14px rgba(154, 114, 34, 0.5);

  /* ---- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 320ms;
  --dur-slow: 620ms;

  /* ---- Z-index ------------------------------------------------------ */
  --z-nav: 100;
  --z-overlay: 200;

  color-scheme: light;
}

/* Weave texture, reused as a motif (jute warp/weft hairlines) */
:root {
  --weave-dark:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(244,239,226,0.028) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(244,239,226,0.028) 7px 8px);
  --weave-light:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(21,32,27,0.022) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(21,32,27,0.022) 7px 8px);
}