/* =========================================================================
   Cannabiz Academy — Colors + Type Foundations
   Source of truth for brand colors, type scale, and semantic CSS vars.
   Import this file anywhere in the design system.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
@font-face {
  font-family: "Graduate";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Graduate-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/DMSans-VariableFont.woff2") format("woff2-variations"),
       url("fonts/DMSans-VariableFont.woff2") format("woff2");
}

/* ---- Design Tokens ------------------------------------------------------ */
:root {
  /* ---- Brand colors ---- */
  --cba-black:    #000000;   /* primary — wordmark, text, dominant bg */
  --cba-mint:     #12E8A2;   /* signature accent — "ACADEMY" badge, CTAs */
  --cba-gray:     #F4F4F4;   /* near-white bg */
  --cba-charcoal: #38373B;   /* tertiary depth accent only — never primary */
  --cba-white:    #FFFFFF;

  /* ---- Extended mint scale (for hover/press/borders, derived) ---- */
  --cba-mint-900: #04301F;   /* deep mint text on mint bg */
  --cba-mint-700: #0A8E60;   /* pressed state */
  --cba-mint-500: #12E8A2;   /* base */
  --cba-mint-300: #6BF1C3;   /* hover tint on dark bg */
  --cba-mint-100: #D5FBEC;   /* mint wash / soft bg */

  /* ---- Charcoal / neutral scale ---- */
  --cba-ink-900: #000000;
  --cba-ink-800: #1A1A1C;
  --cba-ink-700: #38373B;   /* charcoal */
  --cba-ink-500: #6B6A6F;
  --cba-ink-300: #B4B3B7;
  --cba-ink-200: #DEDEDF;
  --cba-ink-100: #F4F4F4;   /* gray bg */
  --cba-ink-050: #FAFAFA;

  /* ---- Semantic surface + foreground ---- */
  --bg:          var(--cba-gray);
  --bg-inverse:  var(--cba-black);
  --surface:     var(--cba-white);
  --surface-2:   var(--cba-ink-100);
  --surface-dark: var(--cba-ink-800);

  --fg:          var(--cba-black);
  --fg-muted:    var(--cba-ink-500);
  --fg-subtle:   var(--cba-ink-300);
  --fg-inverse:  var(--cba-white);
  --fg-on-mint:  var(--cba-black);   /* mint is light — text goes black */

  --accent:      var(--cba-mint);
  --accent-hover:   var(--cba-mint-300);
  --accent-pressed: var(--cba-mint-700);
  --accent-soft: var(--cba-mint-100);

  --border:       var(--cba-ink-200);
  --border-strong: var(--cba-black);

  /* ---- Membership tier tokens ---- */
  --tier-bronze: #A06A3E;
  --tier-silver: #B9BBBF;
  --tier-gold:   #D4A437;

  /* ---- Type ---- */
  --font-display:  "Graduate", "Rockwell", "Courier New", serif;   /* slab, uppercase */
  --font-heading:  "DM Sans", system-ui, -apple-system, sans-serif; /* bold heads */
  --font-body:     "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — optimized for editorial weight + headline impact */
  --fs-hero:     clamp(48px, 7vw, 112px);
  --fs-display:  clamp(40px, 5vw, 72px);
  --fs-h1:       48px;
  --fs-h2:       36px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-label:    12px;
  --fs-micro:    11px;

  --lh-tight:    1.02;
  --lh-heading:  1.1;
  --lh-snug:     1.25;
  --lh-body:     1.5;
  --lh-loose:    1.7;

  --tracking-display: 0.02em;  /* slab serif likes a touch of track */
  --tracking-label:   0.08em;  /* small caps labels */
  --tracking-tight:  -0.01em;

  /* ---- Spacing (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-0:  0;       /* brand default: hard corners like the ACADEMY badge */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Shadows — understated. Brand leans flat + high-contrast ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.12);
  --shadow-offset: 6px 6px 0 var(--cba-black);  /* signature: hard offset */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   Semantic type classes — apply directly, no utilities required.
   ========================================================================= */

.cba-hero,
h1.cba-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

.cba-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg);
}

.cba-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.cba-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.cba-h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.cba-h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.cba-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.cba-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg);
}

.cba-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.cba-body-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}

.cba-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg);
}

.cba-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg);
}

/* =========================================================================
   Base element reset — opt in via .cba-root on a container.
   ========================================================================= */
.cba-root {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cba-root h1 { font: 700 var(--fs-h1)/var(--lh-heading) var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; }
.cba-root h2 { font: 700 var(--fs-h2)/var(--lh-heading) var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; }
.cba-root h3 { font: 700 var(--fs-h3)/var(--lh-snug) var(--font-heading); margin: 0; }
.cba-root h4 { font: 500 var(--fs-h4)/var(--lh-snug) var(--font-heading); margin: 0; }
.cba-root p  { font: 400 var(--fs-body)/var(--lh-body) var(--font-body); margin: 0 0 1em; }
.cba-root code, .cba-root pre { font-family: var(--font-mono); }
.cba-root a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.cba-root a:hover { color: var(--accent-pressed); }

/* Selection — claim the mint */
.cba-root ::selection {
  background: var(--cba-mint);
  color: var(--cba-black);
}