/* ============================================================
   Alumnus Design System — Foundations
   Colors, type, spacing, radii, shadows, motion.
   Import this once; reference variables everywhere.
   ============================================================ */

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

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     COLOR — primary palette
     -------------------------------------------------------- */
  --color-ivy:        #1E3A2E;  /* primary brand — deep forest */
  --color-ivy-dark:   #15281F;  /* hover/press, headers on bone */
  --color-ink:        #14181F;  /* body text on light surfaces */
  --color-ink-soft:   #2C2E33;  /* secondary text */

  /* COLOR — neutrals (warm) */
  --color-bone:       #F2EDE2;  /* primary light surface */
  --color-bone-soft:  #ECE6D8;  /* alternate surface */
  --color-oat:        #E6DECC;  /* dividers / secondary surface */
  --color-oat-dark:   #D7CFBC;  /* hairlines, borders */
  --color-stone:      #6B6A63;  /* warm mid-grey, tertiary text */
  --color-stone-soft: #9A9890;  /* placeholder, disabled */

  /* COLOR — accent */
  --color-brass:      #A8843C;  /* single confident accent */
  --color-brass-dark: #8A6A2E;  /* hover/press */
  --color-brass-soft: #C9A363;  /* low-emphasis accent surfaces */

  /* COLOR — semantic */
  --color-ember:      #8C3F2A;  /* alert — serious, not alarming */
  --color-ember-soft: #B4624B;  /* alert surface tint */
  --color-moss:       #4F6A4A;  /* steady / on-rhythm states */
  --color-moss-soft: #7A9374;

  /* COLOR — semantic aliases */
  --bg-page:          var(--color-bone);
  --bg-surface:       var(--color-bone-soft);
  --bg-inverse:       var(--color-ivy);
  --bg-elevated:      #FFFFFF; /* used ONLY for modals/bottom-sheets on bone */

  --fg-primary:       var(--color-ink);
  --fg-secondary:     var(--color-ink-soft);
  --fg-tertiary:      var(--color-stone);
  --fg-on-ivy:        var(--color-bone);
  --fg-on-brass:      var(--color-ink);

  --border-hairline:  var(--color-oat-dark);
  --border-strong:    var(--color-ink);

  --accent:           var(--color-brass);
  --alert:            var(--color-ember);
  --positive:         var(--color-moss);

  /* --------------------------------------------------------
     TYPE — families
     -------------------------------------------------------- */
  --font-display:  "Spectral", "Source Serif 4", "Georgia", serif;
  --font-body:     "IBM Plex Sans", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, "Consolas", monospace;

  /* TYPE — base scale (mobile-first, expressed in px for clarity) */
  --fs-display-xl: 56px;  --lh-display-xl: 60px;  --tr-display-xl: -0.02em;
  --fs-display-l:  44px;  --lh-display-l:  48px;  --tr-display-l:  -0.018em;
  --fs-display-m:  32px;  --lh-display-m:  36px;  --tr-display-m:  -0.015em;
  --fs-display-s:  24px;  --lh-display-s:  30px;  --tr-display-s:  -0.01em;

  --fs-title-l:    20px;  --lh-title-l:    26px;  --tr-title-l:    -0.005em;
  --fs-title-m:    17px;  --lh-title-m:    22px;
  --fs-title-s:    15px;  --lh-title-s:    20px;

  --fs-body-l:     17px;  --lh-body-l:     26px;
  --fs-body-m:     15px;  --lh-body-m:     22px;
  --fs-body-s:     13px;  --lh-body-s:     18px;

  --fs-label:      12px;  --lh-label:      16px;  --tr-label: 0.06em;  /* uppercase eyebrow */
  --fs-mono:       13px;  --lh-mono:       18px;

  /* TYPE — weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --------------------------------------------------------
     SPACING — base 4
     -------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;

  --gutter-mobile: 24px;
  --gutter-tablet: 40px;
  --gutter-desktop: 72px;

  /* --------------------------------------------------------
     RADII — restrained
     -------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   4px;   /* default — cards, inputs */
  --radius-md:   8px;   /* prominent CTAs, sheets */
  --radius-pill: 999px; /* rare */

  /* --------------------------------------------------------
     SHADOWS — single level
     -------------------------------------------------------- */
  --shadow-none:  none;
  --shadow-soft:  0 8px 24px -8px rgba(20, 24, 31, 0.08);
  --shadow-modal: 0 16px 40px -12px rgba(20, 24, 31, 0.18);

  /* --------------------------------------------------------
     MOTION
     -------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0.0, 0.2, 1.0);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* ============================================================
   Semantic, named type styles — use these in components.
   ============================================================ */

.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
  color: var(--fg-primary);
}
.t-display-l {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: var(--tr-display-l);
  color: var(--fg-primary);
}
.t-display-m {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
  color: var(--fg-primary);
}
.t-display-s {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: var(--tr-display-s);
  color: var(--fg-primary);
}

.t-title-l {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title-l);
  line-height: var(--lh-title-l);
  letter-spacing: var(--tr-title-l);
}
.t-title-m {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title-m);
  line-height: var(--lh-title-m);
}
.t-title-s {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-title-s);
  line-height: var(--lh-title-s);
}

.t-body-l {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}
.t-body-m {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
}
.t-body-s {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  color: var(--fg-secondary);
}

/* eyebrow / overline — used sparingly for section labels */
.t-label {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  font-variant-numeric: tabular-nums;
}

/* default tabular numerals for all body type — metrics-friendly */
body, .t-body-l, .t-body-m, .t-body-s, .t-title-l, .t-title-m, .t-title-s {
  font-variant-numeric: tabular-nums;
}