/*
 * Bustbyte design tokens
 * ---------------------------------------------------------------
 * Pull these into any Bustbyte HTML artifact via:
 *   <link rel="stylesheet" href="path/to/tokens.css">
 *
 * Primary type:      Gilroy (local). Falls back to a close sans.
 * Primary brand:     bb-dark-blue #001D31 on warm/cool pastel canvases.
 * Shape language:    The "B" mark — a rectangle with two right-facing
 *                    chevron cuts. Use it big as a background shape,
 *                    or small as a logo glyph. Never soften its corners.
 */

/* ---------------------------------------------------------------
 * 1. Fonts — Gilroy
 * ---------------------------------------------------------------
 * Bustbyte ships Gilroy locally. When Gilroy isn't on the machine
 * the fallback stack is a close geometric sans (Manrope → system).
 * Use `font-family: var(--font-bb-sans)` everywhere — headings and body.
 */
/* The brand ships Gilroy locally. We register two masters (Medium + ExtraBold)
   and let the browser synthesise intermediate weights. Manrope is a close
   geometric fallback for devices where Gilroy isn't present. */
@font-face {
  font-family: "Gilroy";
  src: url("assets/fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("assets/fonts/Gilroy-Bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap");

:root {
  /* Primary type stack. Gilroy first; Manrope is a close fallback. */
  --font-bb-sans: "Gilroy", "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  /* For code or very technical callouts only. Rare. */
  --font-bb-mono: ui-monospace, "SF Mono", "Roboto Mono", monospace;

  /* ---------------------------------------------------------------
   * 2. Color — Blues are the anchor; pastels carry the personality.
   * ---------------------------------------------------------------
   * Dark blue = every piece of type, every stroke, every logo.
   * Light blue = the default cool neutral canvas.
   * The four pastel pairs (purple/green/peach/yellow) rotate across
   * compositions to create rhythm. Use ONE dominant pastel per frame;
   * bring in a second only as an accent (<15% area).
   */

  /* Blues — always present. */
  --bb-dark-blue:    oklch(0.2212 0.0527 242.21);  /* #001D31 — ink, logo, all text */
  --bb-blue:         oklch(0.8733 0.069  240.77);  /* mid blue — accents, hover states */
  --bb-light-blue:   oklch(0.9483 0.0276 239.65);  /* cool canvas, section bg */

  /* Warm pastels — energy, optimism, "Bustbyte fun". */
  --bb-peach:        oklch(0.8929 0.0604  45.37);  /* canvas / accent block */
  --bb-light-peach:  oklch(0.9401 0.0323  44.37);
  --bb-yellow:       oklch(0.9824 0.0966 108.05);  /* canvas / accent block */
  --bb-light-yellow: oklch(0.9876 0.0479 107.25);

  /* Cool pastels — calm, thoughtful, "Bustbyte craft". */
  --bb-green:        oklch(0.8886 0.0922 149.70);  /* canvas / accent block */
  --bb-light-green:  oklch(0.9657 0.0552 150.75);
  --bb-purple:       oklch(0.7157 0.1056 308.43);  /* accent only — strongest pastel */
  --bb-light-purple: oklch(0.9040 0.0611 308.72);  /* canvas / card bg */

  /* Pure surfaces */
  --bb-white:        #ffffff;
  --bb-off-white:    oklch(0.99 0.002 240);

  /* Semantic roles — prefer these in components. */
  --bb-ink:          var(--bb-dark-blue);   /* everything that is "text" or "stroke" */
  --bb-ink-soft:     color-mix(in oklch, var(--bb-dark-blue) 70%, transparent);
  --bb-ink-muted:    color-mix(in oklch, var(--bb-dark-blue) 50%, transparent);
  --bb-hairline:     color-mix(in oklch, var(--bb-dark-blue) 15%, transparent);
  --bb-bg:           var(--bb-white);
  --bb-bg-cool:      var(--bb-light-blue);
  --bb-bg-warm:      var(--bb-light-peach);

  /* ---------------------------------------------------------------
   * 3. Type scale — tuned for web AND 1920×1080 slides.
   * ---------------------------------------------------------------
   * Display sizes are for hero moments. On slides, body never goes
   * below 24 px. On web, body is 18–20 px.
   */
  --fs-display-xxl: clamp(4.5rem, 8vw, 8rem);    /* 72–128px — slide hero */
  --fs-display-xl:  clamp(3.5rem, 6vw, 6.25rem); /* 56–100px — CTA headline */
  --fs-display-lg:  clamp(2.75rem, 5vw, 4.5rem); /* 44–72px — section opener */
  --fs-h1:          clamp(2.25rem, 3.5vw, 3.5rem); /* 36–56px */
  --fs-h2:          clamp(1.75rem, 2.5vw, 2.5rem); /* 28–40px */
  --fs-h3:          1.75rem;  /* 28px */
  --fs-h4:          1.375rem; /* 22px — button size */
  --fs-body-lg:     1.25rem;  /* 20px */
  --fs-body:        1.125rem; /* 18px — default web */
  --fs-body-sm:     1rem;     /* 16px — metadata */
  --fs-caption:     0.8125rem; /* 13px — footer, legal */

  /* Leading */
  --lh-tight:  1.1;   /* display + headings */
  --lh-snug:   1.2;   /* sub-heads */
  --lh-normal: 1.4;   /* body */
  --lh-relax:  1.55;  /* long-form body */

  /* ---------------------------------------------------------------
   * 4. Space, radii, strokes.
   * ---------------------------------------------------------------
   * Bustbyte is bold and unfussy. Rounded corners are SMALL (8px)
   * or NONE. Button shape is a hard rectangle with a 3px stroke.
   */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  --radius-none: 0;
  --radius-sm:   0;        /* chips, small surfaces — brand is hard-edged */
  --radius-md:   0;        /* cards, inputs */
  --radius-lg:   0;        /* hero surfaces */

  --stroke-hair:  1px;   /* hairline dividers */
  --stroke-base:  2px;   /* input borders */
  --stroke-bold:  3px;   /* button borders, emphasis rules */

  /* ---------------------------------------------------------------
   * 5. Motion — quiet, confident.
   * ---------------------------------------------------------------
   */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.2, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
}

/* ---------------------------------------------------------------
 * Base resets the design system assumes.
 * ---------------------------------------------------------------
 * If you're using tokens.css you probably want these too.
 */
.bb-root,
.bb-root * {
  box-sizing: border-box;
}
.bb-root {
  font-family: var(--font-bb-sans);
  color: var(--bb-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bb-root h1,
.bb-root h2,
.bb-root h3,
.bb-root h4,
.bb-root h5,
.bb-root h6 {
  font-family: var(--font-bb-sans);
  color: var(--bb-ink);
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bb-root h1 { font-size: var(--fs-h1); }
.bb-root h2 { font-size: var(--fs-h2); }
.bb-root h3 { font-size: var(--fs-h3); }
.bb-root h4 { font-size: var(--fs-h4); }
.bb-root p  { margin: 0 0 var(--space-4); }
.bb-root a  { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bb-root a.bb-btn,
.bb-root a.bb-btn-link { color: var(--bb-ink); text-decoration: none; }
.bb-root a.bb-btn.bb-btn--inverse,
.bb-root .bb-btn--inverse { color: var(--bb-bg); }
.bb-root a.bb-btn.bb-btn--inverse:hover,
.bb-root a.bb-btn.bb-btn--inverse:focus-visible,
.bb-root .bb-btn--inverse:hover,
.bb-root .bb-btn--inverse:focus-visible { color: var(--bb-ink); }