/* ============================================================
   COLLB.AI Design System — Colors & Type  (v3 — editorial fashion·AI)
   Ported verbatim from:
   _ds/collb-design-system-4818965c-3ea2-44c4-b338-9e12a92ec2f9/colors_and_type.css
   ------------------------------------------------------------
   FONT SUBSTITUTIONS (commercial originals → Google Fonts):
   · PolySans Slim/Neutral  →  Space Grotesk
   · PolySans Neutral Mono  →  Space Mono
   · Canela Trial Italic    →  Newsreader (italic)
   Swap to the licensed files when available.
   ============================================================ */

/* ----------------------------------------------------------
   RAW TOKENS
   ---------------------------------------------------------- */
:root {
  /* — Core brand — */
  --charcoal:   #1A1816;   /* primary dark surface (campaign bg) */
  --ink:        #080807;   /* text on light, deepest black */
  --panel:      #161616;   /* dark card variant */
  --espresso:   #271304;   /* warm near-black — heavy display fill */
  --cream:      #ECEAE1;   /* primary light surface */
  --paper:      #FFFFFF;   /* white card / inner panels */
  --lime:       #DEF81E;   /* THE accent — chartreuse */

  /* — Warm neutrals — */
  --taupe-100:  #F2F1EA;
  --taupe-200:  #D7D5CC;   /* hairlines on cream */
  --taupe-300:  #C7C4B8;
  --grey-ph:    #D9D9D9;   /* image placeholder */
  --warm-500:   #5A5753;   /* muted body on light */
  --warm-400:   #908D87;
  --warm-300:   #B6B3AD;
  --line-dark:  rgba(236,234,225,0.16);  /* hairline on charcoal */
  --line-light: rgba(8,8,7,0.12);        /* hairline on cream */

  /* — Type families — */
  --font-sans:  "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono:  "Space Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  /* — Weights — */
  --w-light:    300;  /* the editorial display weight */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* — Type scale (editorial, big-jump) — */
  --t-mega:     clamp(64px, 9vw, 100px);
  --t-display:  clamp(44px, 5.5vw, 65px);
  --t-h1:       clamp(34px, 4vw, 40px);
  --t-h2:       28px;
  --t-h3:       20px;
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-body-sm:  14px;
  --t-fine:     13px;
  --t-serif:    clamp(28px, 3vw, 35px);
  --t-serif-sm: 20px;
  --t-mono:     14px;
  --t-label:    12px;

  /* — Tracking — */
  --tr-display: -0.02em;   /* the brand's signature display tracking */
  --tr-tight:   -0.01em;
  --tr-body:     0;
  --tr-label:    0.02em;
  --tr-mono:     0.04em;

  /* — Line heights — */
  --lh-display: 1.0;   /* editorial headlines are set tight */
  --lh-head:    1.05;
  --lh-body:    1.5;
  --lh-snug:    1.3;

  /* — Spacing (4-base) — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* — Radii (editorial = generous) — */
  --r-xs:   8px;    /* buttons, chips, inputs */
  --r-sm:   10px;
  --r-md:   16px;   /* page frame */
  --r-lg:   24px;   /* media masks */
  --r-xl:   28px;   /* campaign cards */
  --r-full: 9999px;

  /* — Borders — */
  --hairline-light: 1px solid var(--line-light);
  --hairline-dark:  1px solid var(--line-dark);

  /* — Shadows (restrained; brand uses a soft inner-ring frame) — */
  --ring-frame: 0 0 0 11px rgba(255,255,255,0.04);
  --shadow-card: 0 1px 2px rgba(8,8,7,0.05), 0 18px 48px -24px rgba(8,8,7,0.30);
  --shadow-pop:  0 12px 32px -10px rgba(8,8,7,0.45);

  /* — Motion — */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 150ms;
  --d-ui: 240ms;
  --d-slow: 480ms;
}

/* ----------------------------------------------------------
   SEMANTIC TOKENS
   ---------------------------------------------------------- */
:root {
  --bg:         var(--charcoal);
  --bg-light:   var(--cream);
  --surface:    var(--paper);
  --accent:     var(--lime);

  --fg:         var(--cream);   /* default text sits on charcoal */
  --fg-muted:   var(--warm-300);
  --fg-on-light:var(--ink);
  --fg-on-light-muted: var(--warm-500);
  --fg-on-accent: var(--ink);
}

/* ----------------------------------------------------------
   RESET + BASE
   ---------------------------------------------------------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }