/* =========================================================================
   mearsit — colors & type tokens
   Natural palette inspired by New Zealand ferns (silver fern, koru) set
   against big, endless blue skies. Warm paper neutrals keep the feel
   human rather than corporate-tech.
   ========================================================================= */

/* ---------- Google Fonts fallbacks (real licensed TTFs not provided) ----- */
/* Fraunces → warm, expressive humanist serif for display & moments of voice.
   Inter Tight → clean, compact humanist sans for UI + body.
   JetBrains Mono → monospace for code.                                      */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600;700&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------------ *
   * 1. COLOUR — Core palette
   * The spiral runs light-green → teal → blue → deep-blue. Those four
   * stops are our brand primaries. We pair them with warm paper
   * neutrals rather than cold greys.
   * ------------------------------------------------------------------ */

  /* Fern greens (young shoots) */
  --fern-50:  #EAF6EE;
  --fern-100: #CFEAD8;
  --fern-200: #A9DBBB;
  --fern-300: #78C894;   /* Spiral Light Green — brand primary */
  --fern-400: #58B57D;
  --fern-500: #3E9C64;
  --fern-600: #2F7B4E;
  --fern-700: #235B3A;
  --fern-800: #183E28;

  /* Teal (where fern meets sky) */
  --teal-50:  #E5F2F2;
  --teal-100: #C5E2E2;
  --teal-200: #9CCDCD;
  --teal-300: #6FB6B6;
  --teal-400: #48A8A8;   /* Spiral Teal — brand primary */
  --teal-500: #348E8E;
  --teal-600: #266F6F;
  --teal-700: #1B5353;
  --teal-800: #123939;

  /* Sky blues */
  --sky-50:   #E6F0F7;
  --sky-100:  #C4DCEC;
  --sky-200:  #95C1DC;
  --sky-300:  #5FA2C8;
  --sky-400:  #2F7C9E;   /* Spiral Blue */
  --sky-500:  #2F7C9E;
  --sky-600:  #1E5A7E;   /* Spiral Dark Blue — brand primary */
  --sky-700:  #164868;
  --sky-800:  #0F3550;
  --sky-900:  #0B2B4A;   /* "Big sky at dusk" — hero backgrounds */

  /* Warm paper neutrals (not cold greys — we're not a bank) */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAF8F3;   /* page background */
  --paper-100: #F4F1EA;   /* card background */
  --paper-200: #E8E3D7;   /* subtle divider */
  --paper-300: #D3CCBC;
  --paper-400: #A89E88;
  --paper-500: #7A725F;
  --paper-600: #55503F;
  --paper-700: #3A362A;
  --paper-800: #22201A;   /* near-black, warm */
  --paper-900: #14120E;

  /* Accent — a low-chroma signal colour for CTAs & warnings */
  --ember-400: #E08A4B;   /* warm sunset / earth */
  --ember-500: #C96F2E;

  /* Silver fern — used VERY sparingly (dividers, keyline, tiny accents).
     Cool neutral-silver; never dominant. */
  --silver-100: #EDEFEE;
  --silver-200: #D6DAD7;
  --silver-300: #B6BDB8;   /* Silver Fern — primary silver */
  --silver-500: #8A938D;

  /* Functional colours */
  --success: #3E9C64;
  --warning: #E08A4B;
  --danger:  #C7463A;
  --info:    #2F7C9E;

  /* ------------------------------------------------------------------ *
   * 2. SEMANTIC COLOUR ROLES
   * Use these in components — never reach for raw palette values.
   * ------------------------------------------------------------------ */
  --bg:          var(--paper-50);
  --bg-raised:   var(--paper-0);
  --bg-sunken:   var(--paper-100);
  --bg-inverse:  var(--sky-900);

  --fg:          var(--paper-800);   /* primary text */
  --fg-muted:    var(--paper-600);   /* secondary text */
  --fg-subtle:   var(--paper-500);   /* tertiary text / captions */
  --fg-inverse:  var(--paper-50);

  --border:        var(--paper-200);
  --border-strong: var(--paper-300);

  --accent:        var(--sky-600);     /* primary brand accent */
  --accent-hover:  var(--sky-700);
  --accent-fg:     var(--paper-0);

  --accent-soft:   var(--teal-400);
  --accent-fresh:  var(--fern-300);

  --link:        var(--sky-600);
  --link-hover:  var(--teal-500);

  /* Brand gradient — used sparingly on hero surfaces only */
  --gradient-spiral:
    linear-gradient(135deg, var(--fern-300) 0%, var(--teal-400) 45%, var(--sky-600) 100%);
  --gradient-sky:
    linear-gradient(180deg, var(--sky-300) 0%, var(--sky-600) 55%, var(--sky-900) 100%);

  /* ------------------------------------------------------------------ *
   * 3. TYPE — Families
   * ------------------------------------------------------------------ */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /* Numeric display — DM Serif Display has lining figures with a properly
     closed 8 and conventional S. Use whenever a number sits large on the
     page (stats, hero pull-numbers, case-study metrics). */
  --font-numeric: 'DM Serif Display', 'Georgia', serif;

  /* Type scale — 1.200 minor third on body, generous on display */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-80: 5rem;

  /* Leading */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Tracking — serif display gets a small negative, UI stays at 0,
     uppercase eyebrows get a positive track. */
  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0;
  --tr-eyebrow: 0.14em;

  /* ------------------------------------------------------------------ *
   * 4. SPACING, RADII, SHADOW, MOTION
   * ------------------------------------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows — warm, low-contrast. Mearsit isn't a flat-bluish SaaS. */
  --shadow-xs: 0 1px 2px rgba(30, 55, 80, 0.06);
  --shadow-sm: 0 2px 6px rgba(30, 55, 80, 0.08), 0 1px 2px rgba(30, 55, 80, 0.04);
  --shadow-md: 0 6px 16px rgba(30, 55, 80, 0.10), 0 2px 4px rgba(30, 55, 80, 0.06);
  --shadow-lg: 0 18px 40px rgba(15, 53, 80, 0.14), 0 4px 10px rgba(30, 55, 80, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* Motion — natural, organic easings; never snappy-bouncy. */
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-soft:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   420ms;
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   Use these in markup rather than setting font properties ad-hoc.
   ========================================================================== */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-16); line-height: var(--lh-body); }

.display-1, h1.display, .h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  font-variation-settings: "opsz" 144;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  max-width: 68ch;
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1.45;
  color: var(--fg-muted);
  letter-spacing: -0.005em;
  max-width: 56ch;
}

.small, small { font-size: var(--fs-14); color: var(--fg-muted); }
.caption     { font-size: var(--fs-12); color: var(--fg-subtle); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--teal-500);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--sky-700);
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }