/* ============================================================
   BOOST YOUR IA — Design Tokens
   Colors & Typography
   ============================================================ */

/* ------------------------------------------------------------
   Web fonts
   Orkney (display) — substituted with Outfit (Google Fonts)
   Quicksand (body) — Google Fonts
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR — Primary navy
     The heart of the brand: deep, trustworthy, professional.
     Used for headlines, primary surfaces, logo lockup.
     ============================================================ */
  --byi-navy-950: #04243C;          /* deepest, page bg, hero blocks */
  --byi-navy-900: #081831;          /* near-black navy, footers */
  --byi-navy-800: #06436E;          /* signature brand blue (logo, headings) */
  --byi-navy-700: #0E5A8A;          /* hover/lighter primary */
  --byi-navy-600: #1A6FA0;
  --byi-navy-500: #4781B4;          /* mid blue, secondary surfaces */
  --byi-navy-300: #9FBED1;
  --byi-navy-100: #DCE8F0;          /* subtle blue tint */
  --byi-navy-50:  #F1F6FA;          /* page wash */

  /* ============================================================
     COLOR — Accent orange
     Energy, action, highlights. Pair sparingly with navy.
     ============================================================ */
  --byi-orange-700: #C25E12;
  --byi-orange-600: #E57321;        /* hover */
  --byi-orange-500: #F49415;        /* signature highlight orange */
  --byi-orange-400: #F6A93C;
  --byi-orange-300: #FBC679;
  --byi-orange-100: #FEEBD0;
  --byi-orange-50:  #FFF6E8;

  --byi-rust-500:   #ED7D31;        /* warmer terracotta variant */

  /* ============================================================
     COLOR — Supporting hues
     Used for diagrams, illustrations, categorical chips.
     ============================================================ */
  --byi-cyan-500:   #00B0F0;        /* line icons, links accent */
  --byi-cyan-400:   #2EC1F2;
  --byi-cyan-100:   #CCEFFB;

  --byi-teal-500:   #4ECDC4;
  --byi-coral-500:  #FF6B6B;
  --byi-yellow-500: #FFD266;
  --byi-purple-700: #6A0472;
  --byi-purple-500: #7D4091;

  /* ============================================================
     COLOR — Neutrals
     ============================================================ */
  --byi-white:      #FFFFFF;
  --byi-paper:      #F8FAFC;        /* off-white page */
  --byi-mist:       #F1F1F0;        /* warm gray surface */
  --byi-line:       #E4E8EC;        /* hairline borders */
  --byi-line-strong:#C8D1D9;
  --byi-ink-300:    #8A99A8;        /* placeholder, captions */
  --byi-ink-500:    #4A5867;        /* secondary text */
  --byi-ink-700:    #2A3744;        /* body text (alt to navy-900) */
  --byi-ink-900:    #0F1822;        /* near-black for body */

  /* ============================================================
     SEMANTIC — colors
     Use these in components, not the raw palette.
     ============================================================ */
  --bg:             var(--byi-paper);
  --bg-elevated:    var(--byi-white);
  --bg-sunken:      var(--byi-mist);
  --bg-hero:        var(--byi-navy-900);     /* dark hero blocks */
  --bg-hero-deep:   var(--byi-navy-950);

  --fg:             var(--byi-navy-900);     /* default body */
  --fg-soft:        var(--byi-ink-500);      /* secondary text */
  --fg-muted:       var(--byi-ink-300);      /* captions, hints */
  --fg-on-dark:     var(--byi-white);
  --fg-on-dark-soft:#B8C7D6;

  --brand:          var(--byi-navy-800);     /* primary brand */
  --brand-strong:   var(--byi-navy-900);
  --brand-soft:     var(--byi-navy-100);
  --accent:         var(--byi-orange-500);   /* highlights */
  --accent-strong:  var(--byi-orange-600);
  --accent-soft:    var(--byi-orange-100);
  --link:           var(--byi-navy-700);
  --link-hover:     var(--byi-orange-500);

  --border:         var(--byi-line);
  --border-strong:  var(--byi-line-strong);
  --divider:        var(--byi-line);

  --success:        #2E8C5F;
  --warning:        var(--byi-orange-500);
  --danger:         var(--byi-coral-500);
  --info:           var(--byi-cyan-500);

  /* ============================================================
     TYPE — families
     Display: Orkney (geometric, slightly humanist).
     Body:    Quicksand (rounded, friendly geometric).
     Mono:    JetBrains Mono / fallbacks.
     ============================================================ */
  --font-display:   "Orkney", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:      "Quicksand", "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ============================================================
     TYPE — scale (modular ~1.250)
     ============================================================ */
  --fs-xs:    0.75rem;     /* 12px — micro labels */
  --fs-sm:    0.875rem;    /* 14px — captions */
  --fs-base:  1rem;        /* 16px — body */
  --fs-md:    1.125rem;    /* 18px — emphasised body */
  --fs-lg:    1.375rem;    /* 22px — lede */
  --fs-xl:    1.75rem;     /* 28px — H4 */
  --fs-2xl:   2.25rem;     /* 36px — H3 */
  --fs-3xl:   3rem;        /* 48px — H2 */
  --fs-4xl:   4rem;        /* 64px — H1 */
  --fs-5xl:   5.5rem;      /* 88px — display */

  /* ============================================================
     TYPE — weight + line-height
     ============================================================ */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.6;

  /* ============================================================
     TYPE — letter-spacing
     Display tightens; eyebrow labels widen + uppercase.
     ============================================================ */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-eyebrow:0.14em;     /* uppercase labels */

  /* ============================================================
     SPACING (4 px grid)
     ============================================================ */
  --sp-0:  0;
  --sp-1:  0.25rem;     /* 4 */
  --sp-2:  0.5rem;      /* 8 */
  --sp-3:  0.75rem;     /* 12 */
  --sp-4:  1rem;        /* 16 */
  --sp-5:  1.5rem;      /* 24 */
  --sp-6:  2rem;        /* 32 */
  --sp-7:  3rem;        /* 48 */
  --sp-8:  4rem;        /* 64 */
  --sp-9:  6rem;        /* 96 */
  --sp-10: 8rem;        /* 128 */

  /* ============================================================
     RADII
     Soft, friendly — never fully pill except for chips/buttons.
     ============================================================ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS
     Soft, blue-tinted. Avoid hard greys.
     ============================================================ */
  --sh-xs:    0 1px 2px rgba(8, 24, 49, 0.06);
  --sh-sm:    0 2px 6px rgba(8, 24, 49, 0.08);
  --sh-md:    0 8px 20px rgba(8, 24, 49, 0.10);
  --sh-lg:    0 18px 40px rgba(8, 24, 49, 0.12);
  --sh-xl:    0 28px 60px rgba(8, 24, 49, 0.16);
  --sh-glow-orange: 0 8px 28px rgba(244, 148, 21, 0.35);
  --sh-glow-navy:   0 8px 28px rgba(6, 67, 110, 0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   BASE TYPOGRAPHY
   Apply the brand voice to raw HTML.
   ============================================================ */
.byi-type {
  font-family: var(--font-body);
  color: var(--fg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.byi-display,
.byi-h1, .byi-h2, .byi-h3, .byi-h4 {
  font-family: var(--font-display);
  color: var(--brand-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.byi-display {
  font-size: clamp(2.75rem, 6vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}
.byi-h1 { font-size: clamp(2.25rem, 5vw, var(--fs-4xl)); }
.byi-h2 { font-size: clamp(1.75rem, 3.5vw, var(--fs-3xl)); }
.byi-h3 { font-size: var(--fs-2xl); }
.byi-h4 { font-size: var(--fs-xl); }

.byi-lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  text-wrap: pretty;
}

.byi-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.byi-caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-soft);
  line-height: var(--lh-normal);
}

/* Eyebrow label — small uppercase tracking-out lockup */
.byi-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Step number — used heavily in pedagogical decks */
.byi-step-number {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--accent);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

.byi-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-feature-settings: "ss01", "calt";
}