/* ============================================================
   BA CREATEX — Design Tokens
   Colors, typography, spacing, radii, shadows, motion.
   ============================================================ */

/* ---------- Webfonts ----------
   NOTE on substitutions:
   - The BA CREATEX wordmark uses a wide, semi-technical sans
     with rounded terminals and the distinctive open-curl R/E.
     The closest free pairing on Google Fonts is **Saira** (semi-
     wide industrial sans). Display headings use Saira at 600/700.
   - Body / UI copy: **Manrope** — neutral geometric sans with
     a slightly humanist feel, matches brochure body copy.
   - Mono / spec tables / part numbers: **JetBrains Mono**.
   The original wordmark font (likely a bespoke or licensed
   typeface such as Eurostile-derivative or "Quagmire") is not
   included; the SVG/PNG logos in /assets/logos/ are pre-rendered.
*/
@import url("https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     Pulled from the logo, brochure infographics, and product
     workflow diagram. Teal and coral are the two brand chromas;
     deep navy carries the typography; cream is the canvas.
     ============================================================ */

  /* Teal scale (primary brand chroma) */
  --teal-50:  #EAF7F8;
  --teal-100: #CBEDF0;
  --teal-200: #9DDDE3;
  --teal-300: #5EC8D2;
  --teal-400: #2DBDC8;   /* light accent */
  --teal-500: #1C8B9B;   /* primary brand teal */
  --teal-600: #17707E;
  --teal-700: #155865;
  --teal-800: #13434F;
  --teal-900: #0E2F38;

  /* Coral scale (secondary brand chroma) */
  --coral-50:  #FBEDED;
  --coral-100: #F5D2D3;
  --coral-200: #E9A5A7;
  --coral-300: #D97276;
  --coral-400: #C95157;
  --coral-500: #C44849;   /* primary brand coral */
  --coral-600: #A93A3D;
  --coral-700: #8B2C30;
  --coral-800: #6B2225;
  --coral-900: #461517;

  /* Ink scale (typography + UI structure) */
  --ink-50:  #F2F4F6;
  --ink-100: #DDE3E8;
  --ink-200: #B7C2CB;
  --ink-300: #8194A1;
  --ink-400: #4F6573;
  --ink-500: #344A58;
  --ink-600: #243B4D;   /* primary text */
  --ink-700: #1B2F3D;
  --ink-800: #142532;
  --ink-900: #0B1822;

  /* Canvas / paper scale (backgrounds) */
  --paper-0:   #FFFFFF;
  --paper-50:  #FCFAF6;   /* off-white */
  --paper-100: #F8F4ED;   /* cream — default page background */
  --paper-200: #EFE9DE;
  --paper-300: #E2DACC;
  --paper-400: #C9C0AF;

  /* Status / utility — pastel surfaces with deeper text tones.
     Status banners and pill chips live as `bg` washes, while the
     `fg` colour carries text/icon contrast (AA on the bg). */
  --info-bg:     #CDEEF1;   /* pastel teal */
  --info-fg:     #155865;
  --info:        var(--info-fg);
  --success-bg:  #D6EDDD;   /* pastel mint */
  --success-fg:  #2F6B4F;
  --success:     var(--success-fg);
  --warning-bg:  #FBE7C6;   /* pastel peach */
  --warning-fg:  #8B5A1A;
  --warning:     var(--warning-fg);
  --danger-bg:   #F5D2D3;   /* pastel coral */
  --danger-fg:   #8B2C30;
  --danger:      var(--danger-fg);

  /* Signature gradient — the brochure's hero gradient,
     a teal-to-coral diagonal used sparingly for headlines & ribbons. */
  --gradient-brand:
    linear-gradient(95deg, var(--teal-500) 0%, var(--teal-400) 38%, var(--coral-400) 78%, var(--coral-500) 100%);
  --gradient-teal:
    linear-gradient(150deg, var(--teal-400) 0%, var(--teal-600) 100%);
  --gradient-coral:
    linear-gradient(150deg, var(--coral-400) 0%, var(--coral-600) 100%);
  --gradient-paper:
    linear-gradient(180deg, var(--paper-50) 0%, var(--paper-100) 100%);

  /* ============================================================
     SEMANTIC COLOR ALIASES
     ============================================================ */
  --bg:            var(--paper-100);
  --bg-elevated:   var(--paper-0);
  --bg-sunken:     var(--paper-200);
  --bg-inverse:    var(--ink-700);

  --fg:            var(--ink-600);
  --fg-muted:      var(--ink-400);
  --fg-subtle:     var(--ink-300);
  --fg-inverse:    var(--paper-0);
  --fg-on-brand:   var(--paper-0);

  --brand:         var(--teal-500);
  --brand-hover:   var(--teal-600);
  --brand-press:   var(--teal-700);
  --brand-soft:    var(--teal-50);

  --accent:        var(--coral-500);
  --accent-hover:  var(--coral-600);
  --accent-soft:   var(--coral-50);

  --border:        var(--paper-300);
  --border-strong: var(--ink-200);
  --border-focus:  var(--teal-500);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Saira", "Eurostile", "Bahnschrift", system-ui, sans-serif;
  --font-body:    "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — modular 1.200 ratio, tuned for technical density */
  --fs-3xs: 0.6875rem;  /* 11px — micro labels, part numbers */
  --fs-2xs: 0.75rem;    /* 12px */
  --fs-xs:  0.8125rem;  /* 13px — captions */
  --fs-sm:  0.875rem;   /* 14px — UI controls */
  --fs-md:  1rem;       /* 16px — body */
  --fs-lg:  1.125rem;   /* 18px — lead body */
  --fs-xl:  1.375rem;   /* 22px — small headings */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px */
  --fs-5xl: 4rem;       /* 64px — hero */
  --fs-6xl: 5.5rem;     /* 88px — section banner */

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  /* Letter spacing — display is set with slight negative tracking,
     all-caps eyebrows use +0.12em like the brochure's section labels. */
  --ls-display: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.14em;   /* "GO FROM IDEA TO REALITY" feel */
  --ls-caps:    0.08em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ============================================================
     RADII — generous and rounded, matching the brochure's
     "soft technical" pill + card system.
     ============================================================ */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;     /* default card */
  --radius-xl:  28px;     /* hero card / package card */
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, low-saturation, slightly cool.
     The brochure uses very gentle elevation; nothing harsh.
     ============================================================ */
  --shadow-xs:  0 1px 2px  rgba(20, 37, 50, 0.06);
  --shadow-sm:  0 2px 6px  rgba(20, 37, 50, 0.07), 0 1px 2px rgba(20,37,50,0.04);
  --shadow-md:  0 8px 24px rgba(20, 37, 50, 0.08), 0 2px 4px rgba(20,37,50,0.04);
  --shadow-lg:  0 18px 40px rgba(20, 37, 50, 0.10), 0 4px 8px rgba(20,37,50,0.05);
  --shadow-xl:  0 30px 60px rgba(20, 37, 50, 0.14), 0 8px 16px rgba(20,37,50,0.06);

  /* Tinted shadows for brand chips */
  --shadow-teal:  0 12px 28px -8px rgba(28, 139, 155, 0.55);
  --shadow-coral: 0 12px 28px -8px rgba(196, 72, 73, 0.55);

  /* Inner highlight for glassy/embossed surfaces */
  --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.55);

  /* ============================================================
     BORDERS — typically 1px hairlines on cream;
     2px brand accents on hover; 4px section dividers.
     ============================================================ */
  --bw-hair:   1px;
  --bw-line:   1.5px;
  --bw-strong: 2px;
  --bw-rule:   4px;

  /* ============================================================
     MOTION — inspired by manufacturing precision: confident,
     not floaty. Default 200ms, "machined" cubic-bezier.
     ============================================================ */
  --ease-standard: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-emphasis: cubic-bezier(0.18, 0.84, 0.32, 1.04);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-slower:  520ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --grid-gutter:  var(--space-6);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY RECIPES
   Use these directly on tags or via .h1 / .h2 / .eyebrow classes.
   ============================================================ */
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw + 1rem, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink-700);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.4vw + 1rem, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--ink-700);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ink-700);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--ink-600);
  margin: 0 0 var(--space-2);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-600);
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--ink-500);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--teal-500);
}

.caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-600);
}

.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Display headline with the brand bicolour treatment —
   first half ink, second half teal, used for "OUR WORKFLOW" etc. */
.headline-bicolor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, var(--fs-6xl));
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  color: var(--ink-700);
}
.headline-bicolor > .accent { color: var(--teal-500); }

a {
  color: var(--teal-600);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--teal-500) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--teal-700);
  border-bottom-color: var(--teal-600);
}

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--border);
  margin: var(--space-8) 0;
}

::selection {
  background: color-mix(in oklab, var(--teal-400) 35%, transparent);
  color: var(--ink-700);
}