/* ============================================================
   COLARE — Colors & Type
   Source of truth: codebase ./Colare Website/colare-website.html
   ============================================================ */

/* Brand fonts — variable TTFs uploaded by Colare */
@font-face {
  font-family: 'Fustat';
  src: url('fonts/Fustat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/InstrumentSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/InstrumentSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── BRAND COLOR ──────────────────────────────────────────── */
  --colare-purple:        rgb(89, 76, 233);   /* #594CE9 — primary brand */
  --colare-purple-mid:    rgb(159, 150, 255); /* #9F96FF — orb mid       */
  --colare-purple-light:  rgb(213, 209, 255); /* #D5D1FF — orb light     */
  --colare-purple-tint:   rgba(89, 76, 233, 0.08);
  --colare-purple-glow:   rgba(89, 76, 233, 0.12);
  --colare-purple-press:  rgb(75, 62, 210);   /* hover/pressed primary   */

  /* ── NEUTRAL / SURFACE ────────────────────────────────────── */
  --bg-white:    #ffffff;
  --bg-light:    rgb(240, 242, 246); /* section bg, dashboard surfaces */
  --bg-dark:     rgb(9, 19, 21);     /* testimonial body color edge   */

  --fg-1:        rgb(56, 56, 56);    /* primary body & headings        */
  --fg-2:        rgb(74, 74, 74);    /* component item names           */
  --fg-3:        rgb(102, 102, 102); /* secondary footer text          */
  --fg-4:        rgb(104, 100, 100); /* testimonial company            */
  --fg-muted:    rgb(224, 226, 230); /* citations, faint borders       */

  --border-hairline: rgba(0, 0, 0, 0.04);  /* nav bottom edge          */
  --border-light:    rgba(0, 0, 0, 0.07);  /* card borders             */
  --border-mid:      rgba(0, 0, 0, 0.15);  /* step-card borders        */
  --border-chip:     rgb(224, 226, 230);   /* badge outline            */

  /* ── SEMANTIC ALIASES ─────────────────────────────────────── */
  --accent:        var(--colare-purple);
  --accent-press:  var(--colare-purple-press);
  --text-strong:   var(--fg-1);
  --text-body:     var(--fg-1);
  --text-muted:    var(--fg-3);
  --link:          var(--colare-purple);

  /* ── RADII ────────────────────────────────────────────────── */
  --radius-xs:   6px;     /* stat cards                                */
  --radius-sm:   8px;     /* tiny chips, dropzones                     */
  --radius-md:   10px;    /* feature cards, demos                      */
  --radius-lg:   20px;    /* large cards, candidate dashboard          */
  --radius-xl:   24px;    /* footer cards, CTA card                    */
  --radius-pill: 999px;   /* badges, buttons                           */

  /* ── ELEVATION ────────────────────────────────────────────── */
  --shadow-card:    0 1px 38px rgba(0, 0, 0, 0.08);          /* big cards (assessment, dashboard) */
  --shadow-soft:    0 8px 20px rgba(0, 0, 0, 0.10);          /* step card hover                   */
  --shadow-feature: 0 4px 16px rgba(89, 76, 233, 0.08);      /* feature card hover (purple tint)  */
  --shadow-footer:  0 1px 2px rgba(69, 69, 69, 0.24),
                    0 0 0 1px rgba(71, 71, 71, 0.08);        /* footer card                       */
  --shadow-portrait:0 4px 20px rgba(0, 0, 0, 0.12);          /* hero portrait halo                */
  --shadow-nav:     0 1px 16px rgba(0, 0, 0, 0.06);          /* nav on scroll                     */

  /* ── SPACING (8pt-ish, observed from codebase) ────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-15:  60px;
  --space-20:  80px;     /* primary section padding                    */
  --space-35:  140px;    /* hero top padding                           */

  /* ── MOTION ───────────────────────────────────────────────── */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);  /* fade-up reveals  */
  --dur-fast:    200ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;
  --dur-reveal:  800ms;

  /* ── TYPE — FAMILIES ──────────────────────────────────────── */
  --font-primary:    'Fustat', system-ui, sans-serif;        /* headings, body, buttons */
  --font-badge:      'Instrument Sans', sans-serif;          /* section badges          */
  --font-footer:     'DM Sans', sans-serif;                  /* footer text             */
  --font-numeric:    'Inter', sans-serif;                    /* stats, citations, ticker*/
  --font-quote:      'Outfit', 'Fustat', sans-serif;         /* testimonial pull-quote  */

  /* ── TYPE — TOKENS (size / line-height / tracking) ────────── */
  /* Display (hero) */
  --t-display-size:    40px;
  --t-display-line:    55px;
  --t-display-weight:  700;
  --t-display-track:   -0.04em;

  /* Section title (h2) */
  --t-h2-size:    30px;
  --t-h2-line:    40px;
  --t-h2-weight:  700;
  --t-h2-track:   -0.02em;

  /* Statement (about block) */
  --t-statement-size:    30px;
  --t-statement-line:    55px;
  --t-statement-weight:  600;
  --t-statement-track:   -0.04em;

  /* Step / sub heading (h5) */
  --t-h5-size:    20px;
  --t-h5-line:    30px;
  --t-h5-weight:  700;
  --t-h5-track:   -0.02em;

  /* Body */
  --t-body-size:    14px;
  --t-body-line:    1.8;
  --t-body-weight:  400;
  --t-body-track:   -0.01em;

  /* Caption / micro */
  --t-cap-size:    12px;
  --t-cap-line:    16px;
  --t-cap-weight:  400;
  --t-cap-track:   -0.01em;

  /* Stat number */
  --t-stat-size:    50px;
  --t-stat-weight:  600;
  --t-stat-track:   -0.02em;

  /* Quote */
  --t-quote-size:    24px;
  --t-quote-line:    1.4;
  --t-quote-weight:  400;
  --t-quote-track:   -1px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — drop in for raw HTML to look on-brand
   ============================================================ */

body, .body {
  font-family: var(--font-primary);
  color: var(--text-body);
  font-size: var(--t-body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-white);
}

.display, h1.display {
  font-family: var(--font-primary);
  font-size: var(--t-display-size);
  line-height: var(--t-display-line);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-track);
  color: var(--text-strong);
}

h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-line);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-track);
  color: var(--text-strong);
}

.statement {
  font-family: var(--font-primary);
  font-size: var(--t-statement-size);
  line-height: var(--t-statement-line);
  font-weight: var(--t-statement-weight);
  letter-spacing: var(--t-statement-track);
  color: var(--text-strong);
}

h5, .h5 {
  font-family: var(--font-primary);
  font-size: var(--t-h5-size);
  line-height: var(--t-h5-line);
  font-weight: var(--t-h5-weight);
  letter-spacing: var(--t-h5-track);
  color: var(--text-strong);
}

p, .p {
  font-family: var(--font-primary);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: var(--t-body-weight);
  letter-spacing: var(--t-body-track);
  color: var(--text-body);
}

.caption {
  font-family: var(--font-primary);
  font-size: var(--t-cap-size);
  line-height: var(--t-cap-line);
  letter-spacing: var(--t-cap-track);
  color: var(--text-muted);
}

.badge-text {
  font-family: var(--font-badge);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 24px;
}

.stat-num {
  font-family: var(--font-numeric);
  font-size: var(--t-stat-size);
  font-weight: var(--t-stat-weight);
  letter-spacing: var(--t-stat-track);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.quote {
  font-family: var(--font-quote);
  font-size: var(--t-quote-size);
  line-height: var(--t-quote-line);
  font-weight: var(--t-quote-weight);
  letter-spacing: var(--t-quote-track);
  color: var(--bg-dark);
}

.cite {
  font-family: var(--font-numeric);
  font-style: italic;
  font-size: var(--t-cap-size);
  color: var(--fg-muted);
}

.footer-text {
  font-family: var(--font-footer);
  font-size: 14px;
  letter-spacing: -0.03em;
  line-height: 20px;
  color: var(--fg-3);
}