/* ─────────────────────────────────────────────────────────────────
   CollegeLab Design System — Colors + Typography Tokens
   ───────────────────────────────────────────────────────────────── */

/* ── Fonts ───────────────────────────────────────────────────────── */
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── PRIMARY (Purple) ─────────────────────────────────────────── */
  /* The brand purple. Used on logos, brand assets, primary statements. */
  --clab-purple:        #513FCD;        /* Primary brand color (most used) */
  --clab-purple-alt:    #5240CC;        /* near-duplicate purple seen in figma */
  --clab-purple-deep:   #5652A3;        /* darker purple for depth */
  --clab-purple-bright: #6059EB;        /* brighter accent variant */

  /* Purple variable scale (lightest → mid). Used for text variations,
     accents, soft fills. From the official "Variables" panel. */
  --clab-purple-var-2:  #7E71D5;
  --clab-purple-var-3:  #9386EC;
  --clab-purple-var-4:  #9D8FFF;
  --clab-purple-var-5:  #C3BAFF;
  --clab-purple-tint-6: #ACA5DC;        /* soft purple stroke */
  --clab-purple-tint-7: #D3C1FF;        /* very soft purple */
  --clab-lavender:      #E8E5FF;        /* lavender — soft background */
  --clab-lavender-pale: #F2EFFF;        /* palest lavender bg */

  /* ── SECONDARY ────────────────────────────────────────────────── */
  /* Secondary palette — used as highlight + accent. From the
     "Backgrounds + Secondary Visual Elements" group. */
  --clab-pink:          #D93883;        /* Hot pink accent */
  --clab-orange:        #FFAE74;        /* Warm peach/orange */
  --clab-orange-light:  #FFDDB8;        /* Light yellow-orange */
  --clab-green:         #07A88E;        /* Brand green / success */
  --clab-green-deep:    #009262;
  --clab-mint:          #9AD9BA;        /* Soft mint green */
  --clab-mint-light:    #C0EBD5;        /* Pale mint */

  /* ── TERTIARY / NEUTRALS ──────────────────────────────────────── */
  /* Used on text-heavy paraphernalia. */
  --clab-black:         #000000;
  --clab-white:         #FFFFFF;
  --clab-grey-light:    #F2F2F2;        /* Light grey bg */
  --clab-blue:          #0671E0;        /* Section accent / illustration blue */
  --clab-blue-soft:     #EEF5FC;        /* Section header bg (used on every page) */
  --clab-stroke:        #ABBED1;        /* Soft hairline divider */

  /* ── TEXT (Tertiary) ──────────────────────────────────────────── */
  --clab-text-strong:   #212121;        /* Headlines on light bg (33,33,33) */
  --clab-text-body:     #717171;        /* Body grey text */
  --clab-text-muted:    #89939E;        /* Caption / meta */
  --clab-text-faint:    #AEAEB2;

  /* ── SEMANTIC ALIASES ─────────────────────────────────────────── */
  /* Foreground / background — pick from above */
  --fg-1:               var(--clab-text-strong);
  --fg-2:               var(--clab-text-body);
  --fg-3:               var(--clab-text-muted);
  --fg-brand:           var(--clab-purple);
  --fg-on-purple:       var(--clab-white);

  --bg-1:               var(--clab-white);
  --bg-2:               var(--clab-blue-soft);     /* page header strip */
  --bg-3:               var(--clab-lavender-pale); /* soft branded bg */
  --bg-brand:           var(--clab-purple);
  --bg-accent-warm:     var(--clab-orange-light);
  --bg-accent-cool:     var(--clab-mint-light);

  --stroke-soft:        var(--clab-stroke);
  --stroke-brand:       var(--clab-purple);

  --semantic-success:   var(--clab-green);
  --semantic-attention: var(--clab-pink);
  --semantic-warm:      var(--clab-orange);

  /* ── TYPE FAMILIES ────────────────────────────────────────────── */
  /* Headlines: Georgia Bold (heavy serif — academic, modern, accessible) */
  --font-display:       Georgia, "Times New Roman", "Tinos", serif;
  /* Body: HK Grotesk — counterweight to thick serif */
  --font-body:          "HK Grotesk", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Fallback longform / paragraph (Montserrat allowed per system) */
  --font-longform:      "HK Grotesk", "Montserrat", system-ui, sans-serif;

  /* ── TYPE SIZES + LEADING ─────────────────────────────────────── */
  /* Display & headline scale — Georgia Bold. Tight leading. */
  --type-display-size:  64px;     --type-display-lh: 1.05;
  --type-h1-size:       44px;     --type-h1-lh:      1.10;
  --type-h2-size:       32px;     --type-h2-lh:      1.15;
  --type-h3-size:       24px;     --type-h3-lh:      1.20;

  /* Body — HK Grotesk */
  --type-lead-size:     20px;     --type-lead-lh:    1.50;
  --type-body-size:     16px;     --type-body-lh:    1.55;
  --type-body-sm-size:  14px;     --type-body-sm-lh: 1.55;
  --type-caption-size:  12px;     --type-caption-lh: 1.45;
  --type-meta-size:     11px;     --type-meta-lh:    1.40;
  /* Eyebrow — small all-caps brand label */
  --type-eyebrow-size:  12px;     --type-eyebrow-lh: 1.10;

  /* ── SPACING ──────────────────────────────────────────────────── */
  /* Base unit = 4px. Multiples up to 96. */
  --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:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ── RADII ────────────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 9999px;

  /* ── SHADOWS ──────────────────────────────────────────────────── */
  /* Card: 0 8 24 rgba(0,0,0,0.10) — pulled directly from the figma type spec. */
  --shadow-card:    0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-soft:    0 2px 8px  rgba(0, 0, 0, 0.06);
  --shadow-pop:     0 12px 32px rgba(81, 63, 205, 0.18);

  /* ── BORDERS ──────────────────────────────────────────────────── */
  --border-hairline: 1px solid var(--stroke-soft);
  --border-brand:    2px solid var(--clab-purple);
  --border-strong:   2px solid var(--clab-text-strong);

  /* ── MOTION ───────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}

/* ─────────────────────────────────────────────────────────────────
   Semantic class hooks (use these in HTML rather than tokens directly)
   ───────────────────────────────────────────────────────────────── */
.clab-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  letter-spacing: -0.01em;
  color: var(--fg-brand);
}
.clab-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-lh);
  color: var(--fg-brand);
}
.clab-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  color: var(--fg-1);
}
.clab-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  color: var(--fg-1);
}
.clab-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  color: var(--fg-2);
}
.clab-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--fg-2);
}
.clab-body-strong {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--fg-1);
}
.clab-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  color: var(--fg-3);
}
.clab-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-lh);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-brand);
}