/* =========================================================================
   Advancemint Design System — Colors & Type
   =========================================================================
   Single import for fonts + tokens. Use the CSS variables below; the
   semantic element styles at the bottom give you sane defaults if you just
   drop content into a page that has imported this file.

   Primary display & body: Google Sans Flex (Google Fonts CDN).
   UI: Roboto. Mono: Geist Mono. All loaded from Google Fonts.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@100..900&family=Roboto:wght@400;500;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLORS — Brand
     ----------------------------------------------------------------------- */
  --am-green:          #1AD379;   /* primary brand green / CTA */
  --am-green-hover:    #17B267;   /* hover */
  --am-green-active:   #0E9056;   /* pressed */
  --am-green-deep:     #0A2414;   /* deep teal — text contrast, dark surfaces */
  --am-leaf-lime:      #8FD160;   /* leaf top-left facet */
  --am-leaf-mid:       #3FB36B;   /* leaf mid */
  --am-leaf-emerald:   #17B267;   /* leaf right facet */
  --am-leaf-teal:      #0E8B7B;   /* leaf bottom-left facet */

  /* COLORS — Neutrals */
  --am-black:          #000000;
  --am-ink:            #161A26;   /* dark charcoal — preferred over pure black on dark surfaces */
  --am-panel-dark:     #2A2E38;   /* dark panel */
  --am-panel-dark-bd:  #3A3F4B;
  --am-slate:          #888EA5;   /* tertiary text, meta, disabled */
  --am-line:           #E4E6EB;   /* default border */
  --am-line-soft:      #F2F3F5;   /* card border, subtle separator */
  --am-white:          #FFFFFF;

  /* COLORS — Surfaces */
  --am-surface:        #FFFFFF;
  --am-surface-cream:  #F9F6F1;   /* warm */
  --am-surface-warm:   #FCFAF8;   /* warmest premium */
  --am-surface-cool:   #F2F3F5;   /* cool gray surface */
  --am-surface-ghost:  #F8F8FA;   /* ghost white — forms */
  --am-surface-mint:   #F3FBE9;   /* light green tint — featured */
  --am-surface-cyan:   #E4FCF5;   /* light cyan tint */

  /* COLORS — Accents */
  --am-blue:           #0099FF;   /* electric blue */
  --am-link:           #0000EE;   /* primary link */
  --am-link-active:    #0000CC;
  --am-purple:         #9B5DE5;   /* status / special highlight */

  /* COLORS — Semantic */
  --am-success:        #17B267;
  --am-success-bg:     #E4FCF5;
  --am-warning:        #E5A23B;
  --am-warning-bg:     #FFF7E6;
  --am-danger:         #D8453B;
  --am-danger-bg:      #FDECEA;
  --am-info:           #0099FF;
  --am-info-bg:        #E6F4FF;

  /* COLORS — Roles (use these in components) */
  --am-fg-1:           var(--am-black);     /* primary text */
  --am-fg-2:           var(--am-ink);       /* secondary heading */
  --am-fg-3:           var(--am-slate);     /* meta */
  --am-fg-on-dark:     var(--am-white);
  --am-bg:             var(--am-white);
  --am-bg-alt:         var(--am-surface-ghost);
  --am-border:         var(--am-line);
  --am-border-soft:    var(--am-line-soft);
  --am-accent:         var(--am-green);

  /* -----------------------------------------------------------------------
     TYPE — Families
     ----------------------------------------------------------------------- */
  --am-font-display: "Google Sans Flex", "Inter Tight", Helvetica, Arial, sans-serif;
  --am-font-ui:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --am-font-mono:    "Geist Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;
  --am-font-link:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* TYPE — Scale (display = ABC Favorit / Inter Tight) */
  --am-fs-display:   80px;   --am-lh-display: 76px;
  --am-fs-h1:        56px;   --am-lh-h1:      60px;
  --am-fs-h2:        48px;   --am-lh-h2:      48px;
  --am-fs-h3:        24px;   --am-lh-h3:      28px;
  --am-fs-h4:        13px;   --am-lh-h4:      19px; /* mono label */
  --am-fs-body:      15px;   --am-lh-body:    20px;
  --am-fs-ui:        12px;   --am-lh-ui:      normal;
  --am-fs-meta:      12px;   --am-lh-meta:    21px;
  --am-fs-code:      12px;

  --am-fw-regular: 400;
  --am-fw-medium:  500;
  --am-fw-semi:    600;
  --am-fw-bold:    700;

  /* -----------------------------------------------------------------------
     SPACING — 4px grid
     ----------------------------------------------------------------------- */
  --am-space-1:    4px;
  --am-space-2:    8px;
  --am-space-3:    12px;
  --am-space-4:    16px;
  --am-space-5:    20px;
  --am-space-6:    24px;
  --am-space-8:    32px;
  --am-space-9:    36px;
  --am-space-10:   40px;
  --am-space-20:   80px;
  --am-space-30:   120px;
  --am-space-40:   160px;

  /* RADII */
  --am-radius-sharp: 3px;   /* buttons, inputs, badges */
  --am-radius-card:  6px;   /* cards, modals, images */
  --am-radius-lg:    12px;  /* large groupings */
  --am-radius-pill:  999px;

  /* SHADOWS / ELEVATION */
  --am-shadow-0: none;
  --am-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);    /* cards */
  --am-shadow-2: 0 4px 6px rgba(0, 0, 0, 0.10);    /* dropdowns */
  --am-shadow-3: 0 8px 12px rgba(0, 0, 0, 0.12);   /* overlays */
  --am-shadow-4: 0 12px 20px rgba(0, 0, 0, 0.15);  /* dialogs */

  /* BORDER WIDTH */
  --am-border-w: 1px;

  /* MOTION */
  --am-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --am-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --am-dur-1: 120ms;
  --am-dur-2: 200ms;
  --am-dur-3: 320ms;

  /* LAYOUT */
  --am-container-max: 1200px;
  --am-container-pad: 32px;
}

/* =========================================================================
   Base element styles — opt-in defaults so plain HTML looks branded.
   These are intentionally light; override per component as needed.
   ========================================================================= */

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

h1, .am-h1 {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-display);
  line-height: var(--am-lh-display);
  font-weight: var(--am-fw-regular);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--am-fg-1);
}

h2, .am-h2 {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h2);
  line-height: var(--am-lh-h2);
  font-weight: var(--am-fw-medium);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--am-fg-1);
}

h3, .am-h3 {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-h3);
  line-height: var(--am-lh-h3);
  font-weight: var(--am-fw-medium);
  margin: 0;
  color: var(--am-fg-1);
}

h4, .am-h4 {
  font-family: var(--am-font-mono);
  font-size: var(--am-fs-h4);
  line-height: var(--am-lh-h4);
  font-weight: var(--am-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--am-fg-1);
}

p, .am-body {
  font-family: var(--am-font-display);
  font-size: var(--am-fs-body);
  line-height: var(--am-lh-body);
  font-weight: var(--am-fw-regular);
  color: var(--am-fg-1);
  margin: 0;
}

small, .am-meta {
  font-family: var(--am-font-ui);
  font-size: var(--am-fs-meta);
  line-height: var(--am-lh-meta);
  color: var(--am-fg-3);
}

code, kbd, pre, .am-mono {
  font-family: var(--am-font-mono);
  font-size: var(--am-fs-code);
}

a, .am-link {
  color: var(--am-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--am-dur-1) var(--am-ease);
}
a:hover, .am-link:hover { color: var(--am-blue); }
a:active, .am-link:active { color: var(--am-link-active); }

/* Responsive type — collapse the display scale on narrow viewports */
@media (max-width: 991px) {
  :root {
    --am-fs-display: 56px;  --am-lh-display: 60px;
    --am-fs-h1:      40px;  --am-lh-h1:      44px;
    --am-fs-h2:      36px;  --am-lh-h2:      40px;
  }
}
@media (max-width: 575px) {
  :root {
    --am-fs-display: 36px;  --am-lh-display: 40px;
    --am-fs-h1:      32px;  --am-lh-h1:      36px;
    --am-fs-h2:      28px;  --am-lh-h2:      32px;
    --am-container-pad: 16px;
  }
}