/* ==========================================================================
   Synth Databases — CORPORATE IDENTITY layer (Shape / Boundary v2.0)
   --------------------------------------------------------------------------
   This file holds the company CI only: brand colour tokens, brand typography,
   the logo lockup, and the few "brand moments" allowed on the public site and
   in brand applications (business card, slide, avatar, banner).

   It is deliberately separate from the product design system (ui.css):
     * ui.css never references --ci-* tokens or .ci-* classes.
     * Product screens use ui.css only; the brand appears there through the
       logo alone.
     * The public site may use at most ONE brand band per page (.ci-band) plus
       the small accent bar (.ci-accent-bar). Everything else is ui.css.
   See docs/DESIGN-SYSTEM.md.
   ========================================================================== */

@font-face { font-family: 'DejaVu Sans'; src: url('/fonts/DejaVuSans.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DejaVu Sans'; src: url('/fonts/DejaVuSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'DejaVu Sans Mono'; src: url('/fonts/DejaVuSansMono.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  /* Values mirror brand/tokens.json from the CI kit v1.1 (checked by test/design.test.js). */
  /* Brand palette — identity use only */
  --ci-aubergine: #251333;
  --ci-aqua: #4FD8E8;
  --ci-lilac: #C6B5EF;
  --ci-frost: #EEF2F4;
  --ci-white: #FFFFFF;
  --ci-muted: #665B70;
  --ci-line: #D6CEDB;
  --ci-success: #216747;
  --ci-warning: #885300;
  --ci-error: #AB2543;
  /* Brand typography — logo wordmark placeholder, marketing display type */
  --ci-font: 'DejaVu Sans', 'Verdana', sans-serif;
}

/* Logo lockup. Real outlined masters are used when present in /assets. */
.brand-link { display: inline-flex; align-items: center; text-decoration: none; padding: 4px 0; border-radius: 4px; }
/* Full lockup never below 240 CSS px; symbol never below 24 px (CI guide §03). */
img.lockup { display: block; width: 240px; min-width: 240px; height: auto; }
img.lockup-lg { width: 320px; }
img.symbol { display: block; width: 32px; height: 32px; }
img.symbol-lg { width: 96px; height: 96px; }
.wordmark-placeholder { font-family: var(--ci-font); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; border: 1px dashed currentColor; padding: 2px 8px; border-radius: 4px; }
.wordmark-aubergine { color: var(--ci-aubergine); }
.wordmark-frost { color: var(--ci-frost); }
.wordmark-lilac { color: var(--ci-lilac); }
.lockup-sm.wordmark-placeholder { font-size: 16px; line-height: 22px; }
.lockup-md.wordmark-placeholder { font-size: 18px; line-height: 24px; }
.lockup-lg.wordmark-placeholder { font-size: 24px; line-height: 32px; }

/* Marketing display type (public site headlines only). */
.ci-display { font-family: var(--ci-font); letter-spacing: -0.035em; }

/* Brand moments (public site only, max one band per page). */
.ci-band { background: var(--ci-aubergine); color: var(--ci-frost); }
.ci-band a { color: var(--ci-frost); }
.ci-band .ci-sub, .ci-band .intro, .ci-band .muted { color: var(--ci-lilac); }
.ci-band h2, .ci-band h1 { color: var(--ci-frost); }
.ci-band :focus-visible { outline-color: var(--ci-aqua); }
.ci-band .ci-cta { background: var(--ci-aqua); color: var(--ci-aubergine); border-color: var(--ci-aqua); }
.ci-band .ci-cta:hover { border-color: var(--ci-frost); }
.ci-band .ci-cta-secondary { background: transparent; color: var(--ci-frost); border-color: var(--ci-frost); }
.ci-accent-bar { height: 6px; background: var(--ci-aqua); border-radius: 6px 6px 0 0; }
.ci-pattern { min-height: 240px; border-radius: 12px; background-repeat: repeat; background-size: 160px; }

/* Brand applications (identity page). */
.ci-biz { width: 340px; max-width: 100%; aspect-ratio: 85 / 55; border-radius: 10px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--ci-font); }
.ci-biz-front { background: var(--ci-aubergine); }
.ci-biz-back { background: var(--ci-frost); border: 1px solid var(--ci-line); color: var(--ci-aubergine); font-size: 13px; line-height: 18px; }
.ci-slide { aspect-ratio: 16 / 9; background: var(--ci-frost); border: 1px solid var(--ci-line); border-radius: 8px; padding: 6%; display: flex; flex-direction: column; justify-content: center; color: var(--ci-aubergine); font-family: var(--ci-font); }
.ci-slide h3 { font-size: clamp(18px, 2.4vw, 28px); line-height: 1.2; margin: 0; }
.ci-slide .ci-divider { width: 80px; height: 6px; background: var(--ci-aqua); margin: 16px 0; }
.ci-slide p { color: var(--ci-muted); }
.ci-avatar { width: 160px; height: 160px; background: var(--ci-aqua); color: var(--ci-aubergine); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-size: 13px; }
.ci-banner { background: var(--ci-aubergine); color: var(--ci-frost); border-radius: 12px; padding: 32px; font-family: var(--ci-font); }
.ci-banner p { color: var(--ci-lilac); margin-top: 8px; }
.ci-swatch { display: flex; align-items: flex-end; height: 88px; border-radius: 8px; padding: 8px; font-size: 12px; line-height: 16px; font-weight: 700; border: 1px solid var(--ci-line); }

/* Pattern: dedicated fields only, never behind copy or charts (CI guide §07). */
.ci-pattern-img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 12px; }
.ci-close { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .ci-close { grid-template-columns: 1fr; } .ci-close .ci-pattern-img { min-height: 160px; max-height: 200px; } }

/* Brand page swatches and stages (no inline styles under the CSP). */
.ci-swatch-aubergine { background: var(--ci-aubergine); color: var(--ci-frost); }
.ci-swatch-aqua { background: var(--ci-aqua); color: var(--ci-aubergine); }
.ci-swatch-lilac { background: var(--ci-lilac); color: var(--ci-aubergine); }
.ci-swatch-frost { background: var(--ci-frost); color: var(--ci-aubergine); }
.ci-swatch-white { background: var(--ci-white); color: var(--ci-aubergine); }
.ci-swatch-muted { background: var(--ci-muted); color: var(--ci-white); }
.ci-stage { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 32px; border-radius: 12px; border: 1px solid var(--ci-line); }
.ci-stage-frost { background: var(--ci-frost); }
.ci-stage-white { background: var(--ci-white); }
.ci-stage-aubergine { background: var(--ci-aubergine); border-color: var(--ci-aubergine); }
.ci-type-sample { font-family: var(--ci-font); color: var(--ci-aubergine); }
.ci-type-sample .ci-type-hero { font-size: clamp(40px, 5vw, 72px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.ci-type-sample .ci-type-mono { font-family: 'DejaVu Sans Mono', monospace; }

/* Pattern specimen grid (brand page). */
.ci-pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.ci-pattern-tile { margin: 0; display: grid; gap: 8px; }
.ci-pattern-tile .ci-pattern-img { aspect-ratio: 720 / 420; min-height: 0; }
.ci-pattern-tile figcaption { display: grid; font-size: 14px; line-height: 20px; color: var(--ci-muted); }
.ci-pattern-tile figcaption strong { color: var(--ci-aubergine); }