/* ============================================================
   INATURAL — Design System Foundations
   Colors + Typography tokens (base + semantic)
   Industry: Advanced Textile Finishing & Functional Fabric Tech
   Vibe: scientific · premium · innovation laboratory
   ============================================================ */

/* --- Webfonts. Display = Sora (self-hosted, user-uploaded brand
   font). Body = IBM Plex Sans, Mono = IBM Plex Mono (CDN — no files
   supplied, CDN delivery is fine). --------------------------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Sora — brand display family, self-hosted (8 weights) */
@font-face{font-family:'Sora';src:url('../fonts/Sora-Thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/Sora-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

/* --- Brand accent display face (self-hosted, user-uploaded).
   Academy Engraved LET — classical engraved caps. Reserved for
   certification seals, ceremonial titles, premium accents. Not for
   body or core scientific headings (those stay Sora). --- */
@font-face {
  font-family: 'Academy Engraved LET';
  src: url('../fonts/Academy-Engraved-LET.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     1. CORE COLOR PRIMITIVES
     --------------------------------------------------------- */

  /* Primary — Petrol Teal (brand). Sampled from the INATURAL logo
     wordmark (#076A83). Scale from light wash to deep ink. */
  --teal-50:  #ECF5F7;
  --teal-100: #D2E9EE;
  --teal-200: #A6D2DC;
  --teal-300: #6FB4C5;
  --teal-400: #3791A8;
  --teal-500: #137A92;   /* mid */
  --teal-600: #076A83;   /* PRIMARY brand teal — from logo */
  --teal-700: #06566B;
  --teal-800: #064453;
  --teal-900: #05333F;
  --teal-950: #03222B;   /* deep petrol ink — dark sections */

  /* Sport Blue — secondary accent drawn from the product towels
     (royal-blue colourway). Use sparingly for energy / sport lines. */
  --blue-500: #1E55C8;
  --blue-600: #1A47AE;

  /* Signature Bronze — THE brand signature accent ("bronze pulse").
     Official identity: a rare, high-value spark. ACCENT ONLY —
     leaf mark, foil, hairline sparks, key dividers. NEVER a background
     fill. Teal + white still carry ~90% of every surface. */
  --bronze-300: #D8C3A4;   /* light tint — faint spark on light */
  --bronze-400: #C6A87E;
  --bronze-500: #B08B5A;   /* SIGNATURE bronze #B08B5A */
  --bronze-600: #977542;
  --bronze-700: #6E5530;   /* deep bronze — text on light if needed */
  --bronze-metal: linear-gradient(135deg,#E6D3B3 0%,#B08B5A 42%,#8A6A3C 72%,#CBB287 100%); /* @kind other */

  /* Soft Silver — accent / metallic hairlines, chrome, dividers. */
  --silver-50:  #F4F6F5;
  --silver-100: #E9EDEB;
  --silver-200: #D7DEDB;
  --silver-300: #C2CCC8;    /* ACCENT soft silver */
  --silver-400: #A4B1AC;
  --silver-500: #85938E;

  /* Neutrals / Charcoal text + surfaces (cool, faintly teal-grey) */
  --charcoal-900: #16242A;  /* TEXT — cool dark charcoal (faint teal) */
  --charcoal-700: #2C3A3F;
  --charcoal-500: #586A70;
  --charcoal-400: #7E8D92;
  --charcoal-300: #A8B4B8;

  --white:      #FFFFFF;
  --paper:      #FBFCFC;    /* near-white app/page bg */
  --surface:    #F4F8F9;    /* off-white surface / cards on white */
  --surface-2:  #EBF1F3;    /* recessed surface */

  /* Functional / status (kept restrained, scientific) */
  --signal-positive: #1F8A5B;
  --signal-warning:  #B5872B;
  --signal-error:    #B23A37;
  --signal-info:     #076A83;

  /* ---------------------------------------------------------
     2. SEMANTIC COLOR TOKENS
     --------------------------------------------------------- */
  --brand:            var(--teal-600);
  --brand-strong:     var(--teal-700);
  --brand-ink:        var(--teal-950);
  --brand-wash:       var(--teal-50);
  --accent:           var(--silver-300); /* @kind color */
  --signature:        var(--bronze-500); /* @kind color */
  --signature-deep:   var(--bronze-700); /* @kind color */
  --signature-metal:  var(--bronze-metal); /* @kind other */
  --accent-metal:     linear-gradient(145deg, #E9EDEB 0%, #C2CCC8 45%, #F4F6F5 70%, #B7C2BD 100%); /* @kind other */

  --bg:               var(--paper);
  --bg-elevated:      var(--white);
  --bg-sunken:        var(--surface);
  --bg-inverse:       var(--teal-950);

  --fg:               var(--charcoal-900);   /* primary text */
  --fg-muted:         var(--charcoal-500);   /* secondary text */
  --fg-subtle:        var(--charcoal-400);   /* tertiary / captions */
  --fg-on-brand:      #EAF6F8;               /* text on teal */
  --fg-on-brand-mut:  #9DC6D0;

  --line:             var(--silver-200);     /* default hairline */
  --line-strong:      var(--silver-300);
  --line-on-dark:     rgba(255,255,255,0.12);

  --focus-ring:       color-mix(in oklch, var(--teal-500) 55%, white);

  /* ---------------------------------------------------------
     3. TYPOGRAPHY PRIMITIVES
     --------------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;
  --font-engraved: 'Academy Engraved LET', 'Sora', Georgia, serif;

  /* Type scale — 1.250 major-third-ish, tuned for premium density */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  33px;
  --text-3xl:  42px;
  --text-4xl:  54px;
  --text-5xl:  68px;
  --text-6xl:  88px;

  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;   /* eyebrow / overline uppercase */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---------------------------------------------------------
     4. SPACING / RADII / ELEVATION
     --------------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px; --space-11: 160px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Soft, layered, teal-tinted elevation */
  --shadow-xs: 0 1px 2px rgba(3,34,43,0.06);
  --shadow-sm: 0 1px 2px rgba(3,34,43,0.06), 0 2px 6px rgba(3,34,43,0.05);
  --shadow-md: 0 4px 10px rgba(3,34,43,0.07), 0 12px 28px rgba(3,34,43,0.07);
  --shadow-lg: 0 8px 24px rgba(3,34,43,0.10), 0 24px 60px rgba(3,34,43,0.10);
  --shadow-brand: 0 12px 32px rgba(7,106,131,0.24);
  --shadow-emerald: var(--shadow-brand); /* legacy alias */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-mid:  320ms; /* @kind other */
  --dur-slow: 560ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .ds-prose or direct use)
   ============================================================ */

.ds-h1, h1.ds {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(40px, 5.5vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h2, h2.ds {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(30px, 3.6vw, var(--text-4xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h3, h3.ds {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.ds-h4, h4.ds {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.ds-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}
.ds-body, p.ds {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}
.ds-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.ds-mono, code.ds {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--brand-strong);
}
.ds-data {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}