/* ==========================================================================
   Growmentum Group — Colors & Type
   The foundation layer. Import this before anything else.
   ========================================================================== */

/* ---- Fonts --------------------------------------------------------------- */
/* Degular (display + UI) — licensed. Degular Text has ink-traps for small sizes.
   PT Serif — for italic editorial pull-quotes and alignment callouts.
   Fallback in AI-generated docs where Degular is unlicensed: Poppins (Google Fonts). */

@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-regular-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-bold-italic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Degular"; src: url("../assets/fonts/degular-black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Degular Text"; src: url("../assets/fonts/degular-text-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular Text"; src: url("../assets/fonts/degular-text-regular-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Degular Text"; src: url("../assets/fonts/degular-text-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular Text"; src: url("../assets/fonts/degular-text-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Degular Text"; src: url("../assets/fonts/degular-text-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "PT Serif"; src: url("../assets/fonts/pt-serif-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../assets/fonts/pt-serif-italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../assets/fonts/pt-serif-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Serif"; src: url("../assets/fonts/pt-serif-bold-italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---- Brand palette (raw) --------------------------------------------- */
  --gm-orange:         #FF4A12; /* Vibrant Orange. Primary accent, CTAs, strategy-layer. */
  --gm-plum:           #2B1238; /* Dark Plum. Primary dark, chrome, headers. */
  --gm-charcoal:       #201717; /* Charcoal. Body dark, footer strips. */
  --gm-lime:           #D9D421; /* Strategic Lime. Secondary accent, vision-layer. */
  --gm-lilac:          #CBC3FF; /* Light Purple. Soft accent, footer text on dark. */
  --gm-beige:          #DED9C9; /* Beige. Neutral background, body text on dark. */
  --gm-forest:         #2C3312; /* Dark Green. Tertiary accent. */
  --gm-white:          #FFFFFF;
  --gm-black:          #000000;

  /* Tint/shade ramps for surfaces + states (derived via oklch) */
  --gm-orange-600:     #E03C0A; /* pressed / darker hover */
  --gm-orange-50:      #FFECE3; /* tint for backgrounds, chips */
  --gm-plum-900:       #1A0A24; /* deeper plum, near-black chrome */
  --gm-plum-700:       #3B1E4C; /* raised surfaces on plum */
  --gm-plum-300:       #7A5C8D; /* muted plum text on light */
  --gm-beige-50:       #F5F2E9; /* lightest beige, page backgrounds */
  --gm-beige-200:      #C9C2AE; /* border on beige */
  --gm-lime-700:       #8F8A14; /* lime used on light bg, accessible */
  --gm-lilac-700:      #5B4FB0; /* lilac used on light bg */

  /* ---- Semantic surfaces / text --------------------------------------- */
  --bg:                var(--gm-beige-50);
  --bg-elevated:       var(--gm-white);
  --bg-inverse:        var(--gm-plum);
  --bg-inverse-deep:   var(--gm-charcoal);

  --fg:                var(--gm-charcoal);
  --fg-muted:          #4A3F3F;
  --fg-subtle:         #746968;
  --fg-inverse:        var(--gm-beige);
  --fg-inverse-muted:  var(--gm-lilac);

  --border:            #E5DFD0;       /* beige border */
  --border-strong:     var(--gm-beige-200);
  --border-inverse:    #3B1E4C;       /* plum-700 on inverse surfaces */

  /* ---- Accents (semantic roles from brand doc) ------------------------- */
  --accent-strategy:   var(--gm-orange);  /* strategy-layer callouts, CTAs */
  --accent-vision:     var(--gm-lime);    /* vision-layer callouts, positive metrics */
  --accent-mission:    var(--gm-plum);    /* mission / permanent foundation */
  --accent-values:     var(--gm-lilac);   /* values layer / soft accents */
  --accent-tertiary:   var(--gm-forest);

  /* ---- Alignment Framework (Mission/Values/Vision/Strategy stack) ----- */
  --align-mission-bg:  #2B1238;   --align-mission-fg:  #FFFFFF;  /* plum */
  --align-values-bg:   #CBC3FF;   --align-values-fg:   #2B1238;  /* periwinkle */
  --align-vision-bg:   #D9D421;   --align-vision-fg:   #201717;  /* citron */
  --align-strategy-bg: #FF4A12;   --align-strategy-fg: #FFFFFF;  /* orange */

  /* ---- Status ---------------------------------------------------------- */
  --status-success:    #3E7A1E;
  --status-warning:    #B8710F;
  --status-danger:     #B3310F;
  --status-info:       var(--gm-lilac-700);

  /* ---- Metric / dashboard colors -------------------------------------- */
  --metric-up:         var(--gm-lime-700);
  --metric-down:       var(--gm-orange-600);
  --metric-neutral:    var(--gm-plum-300);

  /* ---- Type families -------------------------------------------------- */
  --font-display:      "Degular", "Poppins", system-ui, sans-serif;
  --font-ui:           "Degular Text", "Degular", "Poppins", system-ui, sans-serif;
  --font-serif:        "PT Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:         ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* ---- Type scale (modular, 1.25) ------------------------------------ */
  --fs-xs:             12px;
  --fs-sm:             14px;
  --fs-base:           16px;
  --fs-md:             18px;
  --fs-lg:             22px;
  --fs-xl:             28px;
  --fs-2xl:            36px;
  --fs-3xl:            48px;
  --fs-4xl:            64px;
  --fs-5xl:            88px;

  --lh-tight:          1.05;
  --lh-snug:           1.2;
  --lh-normal:         1.45;
  --lh-loose:          1.6;

  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.08em;   /* for small caps / eyebrow labels */

  /* ---- 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 (restrained, Growmentum is slightly squared) ------------ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- Borders / rules -------------------------------------------- */
  --rule-accent: 4px solid var(--gm-orange); /* the signature orange accent bar */
  --rule-hairline: 1px solid var(--border);

  /* ---- Shadows (low, honest — no heavy drops) -------------------- */
  --shadow-xs: 0 1px 2px rgba(32,23,23,0.06);
  --shadow-sm: 0 2px 6px rgba(32,23,23,0.08);
  --shadow-md: 0 6px 18px rgba(32,23,23,0.10);
  --shadow-lg: 0 16px 40px rgba(32,23,23,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---- Motion ---------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ---- Focus ring ------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(255,74,18,0.35);
}

/* Dark surfaces — when a section sits on plum or charcoal, swap semantics. */
.on-dark,
[data-surface="dark"] {
  --bg: var(--gm-plum);
  --bg-elevated: var(--gm-plum-700);
  --fg: var(--gm-beige);
  --fg-muted: var(--gm-lilac);
  --fg-subtle: #8C7F9C;
  --border: var(--border-inverse);
  --border-strong: #4F2E66;
}

/* ==========================================================================
   Base type — map semantic element styles on top of the tokens.
   ========================================================================== */

html { font-family: var(--font-ui); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
}

/* Display — Degular Semibold per brand doc (premium face). */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, var(--fs-2xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

/* Eyebrow / kicker — small caps, wide-tracked, used above headlines. */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gm-orange);
}

/* Body */
p, .body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.body-sm { font-size: var(--fs-sm); }

/* Editorial — PT Serif Italic pull-quotes per brand doc. */
.pull-quote, blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, var(--fs-xl));
  line-height: 1.35;
  color: var(--fg);
  border-left: var(--rule-accent);
  padding: var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
}

.declarative {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, var(--fs-2xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

/* Inline */
strong, b { font-weight: 700; }
em, i { font-style: italic; }
a { color: var(--gm-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--gm-orange-600); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--gm-beige-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

hr {
  border: 0;
  border-top: var(--rule-hairline);
  margin: var(--space-6) 0;
}

/* Selection */
::selection { background: var(--gm-orange); color: var(--gm-white); }