/* =========================================================================
   Mesenaatti.me — Colors & Typography (Modernized 2026)
   -------------------------------------------------------------------------
   Source of truth for the modernization project. Built from the live
   codebase tokens (public_html/css/style.css, skeleton.css, landing_reward.css)
   and reconciled with the v2 aspirational doc.

   Design pillars (per user brief):
   - "Modern and clear"
   - NO rounded corners — sharp, honest edges throughout
   - Finnish-design heritage: respect whitespace, quality over decoration
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. FONT FACES
   -------------------------------------------------------------------------
   The live product loads Adelle + Adelle Sans via Typekit (zwc4big).
   We ship AdelleBasic-Semibold.otf for display headings, and fall back to
   Zilla Slab (Adelle ~= slab serif) and Source Sans 3 (Adelle Sans ~=
   humanist sans) from Google Fonts. Flagged substitutes in README.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Adelle Basic";
  src: url("fonts/AdelleBasic-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap");


/* -------------------------------------------------------------------------
   2. COLOR TOKENS — RAW PALETTE
   ------------------------------------------------------------------------- */

:root {
  /* ----- Brand: Mesenaatti Orange (primary CTA, links, energy) ----- */
  --ms-orange-50:  #fdf1e8;
  --ms-orange-100: #f9d8be;
  --ms-orange-300: #f3a574;
  --ms-orange-500: #ec6f2b;  /* CANONICAL BRAND ORANGE — buttons, links */
  --ms-orange-600: #d35a18;
  --ms-orange-700: #a8460f;
  --ms-orange-warm: #f6863e; /* used historically for status-3 / open campaigns */

  /* ----- Brand: Mesenaatti Cyan (headings, hover, trust) ----- */
  --ms-cyan-50:   #e6f8fa;
  --ms-cyan-100:  #c0eef2;
  --ms-cyan-200:  #addfe5;   /* CANONICAL light teal — page background accent */
  --ms-cyan-300:  #83cfd9;
  --ms-cyan-400:  #61c8d5;   /* hover / link-hover */
  --ms-cyan-500:  #2cb6c7;   /* secondary heading */
  --ms-cyan-600:  #00bcca;   /* CANONICAL heading teal — H2/H3 */
  --ms-cyan-700:  #00939e;
  --ms-cyan-800:  #006a72;

  /* ----- Neutrals (modernized — keep code's blacks for statusbox) ----- */
  --ms-ink-1000:  #111111;
  --ms-ink-900:   #1c1c1c;
  --ms-ink-800:   #282828;   /* statusbox dark background */
  --ms-ink-700:   #403f3b;   /* footer stripe */
  --ms-ink-600:   #4a4a48;
  --ms-ink-500:   #6b6b67;
  --ms-ink-400:   #9c9c96;
  --ms-ink-300:   #c9c8c2;
  --ms-ink-200:   #e5e4dd;
  --ms-ink-100:   #f3f2ec;
  --ms-ink-50:    #faf9f5;   /* warm off-white surface */
  --ms-paper:     #ffffff;

  /* ----- Semantic accents (functional, not decorative) ----- */
  --ms-amber-500: #dca937;   /* edit/control buttons; warnings */
  --ms-amber-100: #fff3d1;
  --ms-red-500:   #d8442a;
  --ms-red-100:   #fbe1dc;
  --ms-green-500: #2b7a3e;   /* success/funded */
  --ms-green-100: #dff0e3;


  /* -----------------------------------------------------------------
     3. SEMANTIC TOKENS — what to actually use in components
     ----------------------------------------------------------------- */

  /* Surfaces */
  --bg-page:        #addfe5;
  --bg-canvas:      var(--ms-cyan-200);      /* the iconic light-teal page bg */
  --bg-surface:     var(--ms-paper);
  --bg-surface-2:   var(--ms-ink-50);
  --bg-surface-alt: var(--ms-ink-100);
  --bg-inverse:     var(--ms-ink-800);       /* statusbox / dark CTA panels */
  --bg-footer:      var(--ms-ink-1000);

  /* Foreground / text */
  --fg-1:           var(--ms-ink-1000);      /* primary text */
  --fg-2:           var(--ms-ink-700);       /* secondary text */
  --fg-3:           var(--ms-ink-500);       /* tertiary / meta */
  --fg-4:           var(--ms-ink-400);       /* disabled */
  --fg-on-inverse:  var(--ms-paper);
  --fg-on-brand:    var(--ms-paper);

  /* Brand semantics */
  --brand:          var(--ms-orange-500);
  --brand-hover:    var(--ms-orange-600);
  --brand-soft:     var(--ms-orange-50);
  --accent:         var(--ms-cyan-600);
  --accent-hover:   var(--ms-cyan-400);
  --accent-soft:    var(--ms-cyan-50);

  /* Links */
  --link:           var(--ms-orange-500);
  --link-hover:     var(--ms-cyan-400);      /* unique brand quirk — orange→cyan on hover */
  --link-visited:   var(--ms-orange-700);

  /* Status / state */
  --status-funded:  var(--ms-green-500);
  --status-open:    var(--ms-cyan-600);
  --status-closing: var(--ms-orange-warm);
  --status-warn:    var(--ms-amber-500);
  --status-error:   var(--ms-red-500);

  /* Borders & dividers — always 1–2px solid, sharp */
  --border:         var(--ms-ink-200);
  --border-strong:  var(--ms-ink-800);
  --border-accent:  var(--ms-cyan-500);

  /* Focus ring */
  --focus-ring:     0 0 0 3px var(--ms-cyan-300);


  /* -----------------------------------------------------------------
     4. TYPE SCALE
     -----------------------------------------------------------------
     Two families:
       --font-display : Adelle Basic / Zilla Slab — slab-serif headings,
                        all-caps small headings (a Mesenaatti signature).
       --font-sans    : Source Sans 3 / Adelle Sans — body text.
     Numbers tuned for the modernization: tighter leading, larger H1s
     than the live site's 28px (which felt cramped on desktop).
  */

  --font-display: "Adelle Basic", "Zilla Slab", "Adelle", Georgia, serif;
  --font-sans:    "Source Sans 3", "adelle-sans", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Raw type ramp (px) */
  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-display-m:  44px;
  --fs-h1:         40px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-h5:         15px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  /* Line heights */
  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-relaxed:    1.6;

  /* Letter-spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-overline: 0.12em;


  /* -----------------------------------------------------------------
     5. SPACING — 4-pt scale (matches v2 doc)
     ----------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* page rhythm baseline — column gutter */
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;


  /* -----------------------------------------------------------------
     6. CORNERS — SHARP. Always.
     ------------------------------------------------------------------
     User brief: NO rounded corners. We keep one token at 0 so component
     authors who reach for `border-radius: var(--radius-*)` get the right
     answer. A 2px allowance exists for tiny chips/avatars only — flag
     in review if you use it.
  */
  --radius-0:    0;
  --radius-chip: 2px;
  --radius-pill: 999px;     /* avatars only */


  /* -----------------------------------------------------------------
     7. ELEVATION — flat, with one decisive shadow for lifted surfaces
     ----------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--ms-ink-200);                  /* hairline */
  --shadow-2: 0 2px 0 0 var(--ms-ink-800);                  /* offset hard shadow — signature */
  --shadow-3: 0 8px 24px -8px rgba(17, 17, 17, 0.18);
  --shadow-4: 0 16px 40px -12px rgba(17, 17, 17, 0.22);


  /* -----------------------------------------------------------------
     8. MOTION
     ----------------------------------------------------------------- */
  --ease-out:      cubic-bezier(.2,.7,.2,1);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;


  /* -----------------------------------------------------------------
     9. LAYOUT
     ----------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --col-gutter:    var(--space-4);
  --grid-columns:  12;
  --bp-mobile:     480px;
  --bp-tablet:     768px;
  --bp-desktop:    1024px;
  --bp-wide:       1440px;
}


/* -------------------------------------------------------------------------
   10. ELEMENT DEFAULTS — apply these globally with a single CSS import
   ------------------------------------------------------------------------- */

html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase; /* signature Mesenaatti H2 treatment */
  letter-spacing: 0.01em;
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
}
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: 600;
     text-transform: uppercase; letter-spacing: var(--tracking-overline); }
h6 { font-size: var(--fs-overline); line-height: var(--lh-snug); font-weight: 700;
     text-transform: uppercase; letter-spacing: var(--tracking-overline);
     color: var(--fg-3); }

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); border-bottom-color: currentColor; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

small, .text-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.text-overline {
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  font-weight: 700;
  color: var(--fg-3);
}

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

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-5) 0;
}

::selection { background: var(--ms-orange-500); color: white; }