/* ============================================================
   Hello Focus — Colors & Typography tokens
   Read from any HTML in the project via:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* Fonts: Montserrat is the official brand face (per Style Guide.pdf).
   Inter is paired as a humanist body face — see README for rationale. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------
     COLORS — Brand
     The brand sits on a deep forest green ("Focus Green").
     A brighter "Leaf" green is used as an accent (e.g. EDM "LESS & MORE").
     Everything else is paper, ink and a small set of warm neutrals.
     ------------------------------------------------------------------ */

  --focus-green:        #34715B;   /* PRIMARY — logo, backgrounds, large fields (Style Guide) */
  --focus-green-700:    #2A5E4B;   /* hover / pressed on green surfaces */
  --focus-green-800:    #1F4A3A;   /* deepest — used sparingly for text on cream */
  --focus-green-300:    #6E9B89;   /* muted — captions on green backgrounds */

  --leaf-green:         #39B54A;   /* ACCENT — callouts, highlights, certifications (Style Guide) */
  --leaf-green-600:     #2E9C3E;   /* hover on leaf */
  --leaf-green-100:     #E5F4E7;   /* tint — soft chip backgrounds */

  /* Paper / Ink */
  --paper:              #FFFFFF;   /* card, default surface on top of green */
  --paper-cream:        #F7FBFA;   /* page background — barely off-white */
  --paper-warm:         #F1F3EF;   /* second tier surface */
  --ink:                #1B2A23;   /* primary body copy */
  --ink-2:              #4A5A52;   /* secondary copy */
  --ink-3:              #7C8A82;   /* muted captions, helpers */
  --hairline:           #D6DCD8;   /* dividers and borders */
  --hairline-strong:    #B6BFBA;   /* input borders */

  /* Semantic */
  --success:            var(--leaf-green-600);
  --warning:            #D9A441;
  --danger:             #C5523F;
  --info:               #2F6E8E;

  /* Foreground / Background semantic aliases */
  --fg-1:               var(--ink);
  --fg-2:               var(--ink-2);
  --fg-3:               var(--ink-3);
  --fg-on-green:        var(--paper);
  --bg-1:               var(--paper-cream);
  --bg-2:               var(--paper);
  --bg-brand:           var(--focus-green);

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     Display: Outfit  — geometric grotesk; stands in for the
              wordmark's bold geometric letterforms
     Body:    Inter   — humanist sans for everything readable
     ------------------------------------------------------------------ */

  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Montserrat', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;

  /* Type scale — modular, generous tracking for display */
  --fs-display:   72px;
  --fs-h1:        48px;
  --fs-h2:        36px;
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-eyebrow:   12px;

  --lh-tight:     1.05;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-loose:     1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  /* ------------------------------------------------------------------
     SPACING / RADIUS / SHADOWS
     ------------------------------------------------------------------ */
  --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;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(27, 42, 35, 0.06), 0 1px 1px rgba(27, 42, 35, 0.04);
  --shadow-md:  0 6px 18px rgba(27, 42, 35, 0.08), 0 2px 4px rgba(27, 42, 35, 0.04);
  --shadow-lg:  0 24px 48px rgba(27, 42, 35, 0.10), 0 6px 12px rgba(27, 42, 35, 0.04);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ------------------------------------------------------------------
   Semantic element styles — drop in anywhere and headings/etc. just work
   ------------------------------------------------------------------ */

html {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  font-weight: 700;
}

h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0 0 1em;
}

small { font-size: var(--fs-body-sm); color: var(--fg-3); }
code  { font-family: var(--font-mono); font-size: 0.92em; background: var(--paper-warm); padding: 0.1em 0.35em; border-radius: var(--radius-xs); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--focus-green);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* numeric ranks used in "01 / 02 / 03" lists on the site */
.rank-numeral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--leaf-green);
  letter-spacing: 0;
}