/*
 * BPM Consulting — Design Tokens
 * Source: Brandbook ID BPM / BPMe (v1.0, 2025)
 * ─────────────────────────────────────────────
 * Brand fonts (self-hosted from fonts/):
 *   • Unbounded       — logo & display headlines
 *   • Open Sans       — body copy, UI labels (replaces Nexa)
 *   • Libre Franklin  — supporting body / editorial
 */

/* ── UNBOUNDED ─────────────────────────────── */
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* ── OPEN SANS (body / UI) ─────────────────── */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('fonts/OpenSans_Condensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Open Sans SemiCondensed */
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans SemiCondensed';
  src: url('fonts/OpenSans_SemiCondensed-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── LIBRE FRANKLIN (editorial / supporting) ─ */
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('fonts/LibreFranklin-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── BASE COLOR TOKENS ─────────────────────────────────── */
:root {
  /* Primary palette */
  --color-blue:          #00BFFC;   /* BPM Cyan Blue — HEX brand spec */
  --color-blue-dark:     #0090CC;   /* Derived dark blue for hover/CTAs */
  --color-blue-deeper:   #005A8E;   /* Deep navy for gradient endpoints */
  --color-blue-light:    #7FDFFD;   /* Light blue for accents / hover states */
  --color-blue-pale:     #E0F7FF;   /* Very pale blue for backgrounds */

  --color-black:         #12101A;   /* Brand near-black — HEX brand spec */
  --color-white:         #FFFFFF;   /* Pure white */

  /* Neutral grays */
  --color-gray-90:       #1E1C26;   /* Very dark, near black */
  --color-gray-70:       #3E3C4A;   /* Dark gray — secondary text on dark */
  --color-gray-50:       #7A7888;   /* Mid gray — disabled / metadata */
  --color-gray-30:       #B8B6C4;   /* Light gray — borders, dividers */
  --color-gray-10:       #E8E7EF;   /* Near-white gray — subtle backgrounds */
  --color-gray-05:       #F4F3F8;   /* Lightest gray — section backgrounds */

  /* be AGENTIA accent (sub-brand) */
  --color-agentia-purple: #6B21C8;  /* Derived from logo */
  --color-agentia-blue:   #00BFFC;  /* Shared with BPM main blue */

  /* ─── SEMANTIC COLOR TOKENS ─────────────────────────── */
  --color-bg-primary:    var(--color-white);
  --color-bg-dark:       var(--color-black);
  --color-bg-section:    var(--color-gray-05);
  --color-bg-blue:       var(--color-blue);

  --color-text-primary:  var(--color-black);
  --color-text-secondary: var(--color-gray-50);
  --color-text-on-dark:  var(--color-white);
  --color-text-on-blue:  var(--color-white);
  --color-text-accent:   var(--color-blue);
  --color-text-link:     var(--color-blue);

  --color-border:        var(--color-gray-30);
  --color-border-subtle: var(--color-gray-10);

  --color-interactive:   var(--color-blue);
  --color-interactive-hover: var(--color-blue-dark);
  --color-interactive-pressed: var(--color-blue-deeper);

  /* ─── GRADIENTS ─────────────────────────────────────── */
  --gradient-blue:       linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
  --gradient-dark:       linear-gradient(135deg, var(--color-black) 0%, var(--color-blue-deeper) 100%);
  --gradient-neutral:    linear-gradient(180deg, var(--color-gray-05) 0%, var(--color-white) 100%);
  --gradient-blue-shine: linear-gradient(135deg, #7FDFFD 0%, #00BFFC 40%, #0090CC 100%);

  /* ─── BASE TYPE TOKENS ──────────────────────────────── */
  --font-logo:       'Unbounded', sans-serif;          /* Logo wordmark only */
  --font-display:    'Unbounded', sans-serif;          /* Large headlines */
  --font-body:       'Open Sans', sans-serif;          /* Body copy, paragraphs */
  --font-ui:         'Open Sans', sans-serif;          /* UI labels, buttons */
  --font-condensed:  'Open Sans Condensed', sans-serif;/* Tight spaces, captions */
  --font-editorial:  'Libre Franklin', sans-serif;     /* Editorial / supporting text */
  --font-mono:       'Courier New', monospace;         /* Code / data (fallback) */

  /* ─── TYPE SCALE ────────────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  4rem;       /* 64px */

  /* ─── FONT WEIGHT ───────────────────────────────────── */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* ─── LINE HEIGHTS ──────────────────────────────────── */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* ─── LETTER SPACING ────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.15em;

  /* ─── SPACING SCALE ─────────────────────────────────── */
  --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-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ─── BORDER RADIUS ─────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── SHADOWS ───────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-blue: 0 4px 20px rgba(0,191,252,0.30);
  --shadow-dark: 0 8px 32px rgba(18,16,26,0.35);

  /* ─── Z-INDEX SCALE ─────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-top:     9999;

  /* ─── TRANSITIONS ───────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* ─── SEMANTIC ELEMENT STYLES ───────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.body-editorial {
  font-family: var(--font-editorial);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.overline {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-gray-05);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-black);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-blue-dark); }

/* ─── UTILITY CLASSES ───────────────────────────────────── */
.text-blue  { color: var(--color-blue); }
.text-white { color: var(--color-white); }
.text-dark  { color: var(--color-black); }
.text-muted { color: var(--color-gray-50); }

.bg-white   { background: var(--color-white); }
.bg-dark    { background: var(--color-black); }
.bg-blue    { background: var(--color-blue); }
.bg-section { background: var(--color-gray-05); }