/* ============================================================
   SAUG Design System — Colors & Typography
   Strategic AI Upskilling Group
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -------- PRIMARY PALETTE -------- */
  --saug-teal:        #2D6B5E;
  --saug-teal-light:  #3D8A78;
  --saug-near-black:  #1A1A18;
  --saug-cream:       #F5F2EC;
  --saug-warm-gray:   #E8E4DA;
  --saug-mid-gray:    #8A8577;
  --saug-white:       #FFFFFF;

  /* -------- SEMANTIC -------- */
  --success:  #2D6B5E;
  --warning:  #C4873B;
  --error:    #B54242;
  --info:     #3D7A8A;

  /* -------- FOREGROUND / BACKGROUND TOKENS -------- */
  --bg-page:       var(--saug-cream);
  --bg-surface:    var(--saug-white);
  --bg-tinted:     #EDE9DF;
  --bg-teal-soft:  #E4EDE9;

  --fg-primary:    var(--saug-near-black);
  --fg-secondary:  var(--saug-mid-gray);
  --fg-inverse:    var(--saug-white);
  --fg-accent:     var(--saug-teal);

  --border-hair:   var(--saug-warm-gray);
  --border-strong: var(--saug-near-black);

  /* -------- TYPOGRAPHY -------- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  --fs-hero:       72px;
  --fs-title:      32px;
  --fs-section:    20px;
  --fs-subhead:    15px;
  --fs-body:       15px;
  --fs-small:      13px;
  --fs-caption:    11px;
  --fs-eyebrow:    11px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-body:   1.55;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-caps:    0.1em;
  --tracking-eyebrow: 0.14em;

  --sp-2xs: 2px;
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  --radius:   0;
  --border-w: 1px;

  --shadow-none: none;
  --shadow-sm:   0 1px 0 rgba(26, 26, 24, 0.06);
  --shadow-md:   0 2px 12px rgba(26, 26, 24, 0.06);
  --shadow-lg:   0 8px 28px rgba(26, 26, 24, 0.08);

  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;

  --content-max: 1200px;
  --gutter:      32px;
}

/* ============================================================
   RESETS
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
* { box-sizing: border-box; }
button, input, textarea { font-family: inherit; }
::selection { background: var(--saug-teal); color: #fff; }

a {
  color: var(--saug-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { color: var(--saug-teal-light); border-bottom-color: currentColor; }
</content>
</invoke>