/* ============================================================
   LaunchMyCannabiz — Colors & Type
   Source of truth: LMC Brand Guidelines (Oct 13, 2025)
   ============================================================ */

/* ---- Webfonts (local) -------------------------------------- */
/* Paths assume colors_and_type.css is at project root and fonts/ is a sibling.
   When importing into a nested file, use a path-relative override or copy fonts in. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Poppins-Thin.ttf')        format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Poppins-ThinItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf')       format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf')     format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf')      format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf')      format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf')    format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf')        format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf')   format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf')       format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/PermanentMarker-Regular.ttf') format('truetype'); }

:root {
  /* ---- Color: Main palette -------------------------------- */
  --lmc-green:        #4FBB89;   /* leaf green; primary accent */
  --lmc-yellow:       #FFD10D;   /* signature yellow; primary accent */
  --lmc-black:        #231F20;   /* near-black; body text + leaf glyph */
  --lmc-white:        #FFFFFF;

  /* ---- Color: Secondary palette --------------------------- */
  --lmc-teal:         #67C9D0;   /* cool secondary; cards / surfaces */
  --lmc-red:          #EE495D;   /* warm secondary; alerts / emphasis */

  /* ---- Color: Tints / extensions (derived, not in guide) -- */
  --lmc-green-50:     #ECF8F2;
  --lmc-green-100:    #D1EEDF;
  --lmc-green-700:    #2F8C61;
  --lmc-yellow-50:    #FFF8D6;
  --lmc-yellow-100:   #FFEC8A;
  --lmc-yellow-700:   #C99F00;
  --lmc-teal-50:      #E6F6F8;
  --lmc-teal-700:     #3E9098;
  --lmc-red-50:       #FCE7EA;
  --lmc-red-700:      #B83142;

  /* ---- Color: Neutral scale (extends Black/White) --------- */
  --lmc-ink:          #231F20;   /* alias for black */
  --lmc-ink-80:       #4D4849;
  --lmc-ink-60:       #777374;
  --lmc-ink-40:       #A8A5A6;
  --lmc-ink-20:       #D6D4D4;
  --lmc-ink-10:       #ECEBEB;
  --lmc-ink-05:       #F6F5F5;
  --lmc-paper:        #FBFAF6;   /* warm off-white, plays nicely with yellow */

  /* ---- Color: Semantic ------------------------------------ */
  --fg-1:             var(--lmc-black);
  --fg-2:             var(--lmc-ink-80);
  --fg-3:             var(--lmc-ink-60);
  --fg-on-dark:       var(--lmc-white);
  --fg-on-yellow:     var(--lmc-black);
  --fg-on-green:      var(--lmc-black);
  --fg-on-teal:       var(--lmc-black);
  --fg-on-red:        var(--lmc-white);

  --bg-1:             var(--lmc-white);
  --bg-2:             var(--lmc-paper);
  --bg-3:             var(--lmc-ink-05);
  --bg-inverse:       var(--lmc-black);

  --border-1:         var(--lmc-ink-10);
  --border-2:         var(--lmc-ink-20);
  --border-strong:    var(--lmc-black);

  --accent-primary:   var(--lmc-green);
  --accent-warm:      var(--lmc-yellow);
  --accent-cool:      var(--lmc-teal);
  --accent-alert:     var(--lmc-red);

  /* ---- Signature gradient (yellow → green, vertical) ------ */
  --lmc-gradient:     linear-gradient(180deg, #FFD10D 0%, #FFD10D 35%, #4FBB89 100%);
  --lmc-gradient-soft:linear-gradient(180deg, #FFE873 0%, #B7E2C8 100%);

  /* ---- Typography: Families ------------------------------- */
  --font-main:        'Poppins', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --font-personality: 'Permanent Marker', 'Poppins', cursive;

  /* ---- Typography: Weights -------------------------------- */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* ---- Typography: Type scale ----------------------------- */
  --fs-display:       64px;   /* hero headlines */
  --fs-h1:            48px;
  --fs-h2:            36px;
  --fs-h3:            28px;
  --fs-h4:            22px;
  --fs-lead:          20px;   /* lead paragraph */
  --fs-body:          16px;
  --fs-small:         14px;
  --fs-micro:         12px;
  --fs-eyebrow:       12px;   /* uppercase eyebrow labels */

  /* ---- Typography: Line height ---------------------------- */
  --lh-tight:         1.05;
  --lh-snug:          1.2;
  --lh-normal:        1.45;
  --lh-loose:         1.6;

  /* ---- Typography: Letter-spacing ------------------------- */
  --tr-tight:         -0.02em;
  --tr-normal:        0;
  --tr-wide:          0.08em;   /* eyebrows, all-caps labels */
  --tr-wider:         0.16em;

  /* ---- Spacing scale (4px base) --------------------------- */
  --space-0:          0;
  --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;

  /* ---- Radii --------------------------------------------- */
  --radius-xs:        4px;
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-pill:      999px;

  /* ---- Shadows / elevation ------------------------------- */
  --shadow-sm:        0 1px 2px rgba(35, 31, 32, 0.06), 0 1px 1px rgba(35, 31, 32, 0.04);
  --shadow-md:        0 4px 12px rgba(35, 31, 32, 0.08), 0 2px 4px rgba(35, 31, 32, 0.04);
  --shadow-lg:        0 16px 32px rgba(35, 31, 32, 0.12), 0 4px 8px rgba(35, 31, 32, 0.06);
  --shadow-pop:       0 6px 0 var(--lmc-black);    /* hard offset; signature playful press feel */

  /* ---- Borders ------------------------------------------- */
  --border-thin:      1px solid var(--border-1);
  --border-strong-1:  1.5px solid var(--lmc-black);
  --border-bold:      2px solid var(--lmc-black);

  /* ---- Motion -------------------------------------------- */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         120ms;
  --dur-base:         200ms;
  --dur-slow:         420ms;
}

/* ============================================================
   Base text styles — apply with .lmc class scope
   ============================================================ */

.lmc, .lmc * {
  box-sizing: border-box;
}

.lmc {
  color: var(--fg-1);
  font-family: var(--font-main);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

.lmc h1, .lmc .h1,
.lmc h2, .lmc .h2,
.lmc h3, .lmc .h3,
.lmc h4, .lmc .h4 {
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}

.lmc .display       { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.lmc h1, .lmc .h1   { font-size: var(--fs-h1); }
.lmc h2, .lmc .h2   { font-size: var(--fs-h2); }
.lmc h3, .lmc .h3   { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.lmc h4, .lmc .h4   { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

.lmc .lead          { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg-2); }
.lmc p, .lmc .body  { font-size: var(--fs-body); line-height: var(--lh-normal); margin: 0; }
.lmc .small         { font-size: var(--fs-small); line-height: var(--lh-normal); }
.lmc .micro         { font-size: var(--fs-micro); line-height: var(--lh-snug); }

.lmc .eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--fg-2);
}

/* Personality font — use sparingly, like the "My" in the logo.
   Best on: 1–3 word callouts, accent words inside a headline, eyebrows. */
.lmc .personality,
.lmc .marker {
  font-family: var(--font-personality);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  /* Marker fonts feel right at slightly larger optical size */
  line-height: 0.95;
}

.lmc a {
  color: var(--lmc-green-700);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.lmc a:hover { color: var(--lmc-black); }

.lmc code, .lmc kbd, .lmc samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--lmc-ink-05);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-xs);
}

/* Selection */
.lmc ::selection { background: var(--lmc-yellow); color: var(--lmc-black); }