/* Composer Agents — design tokens (copied verbatim from the bound design
   system's tokens/*.css). Pure CSS custom properties — no build step, no
   JS framework required. Keep in sync with the source design system if the
   brand palette or scale changes. */

:root {
  /* ===== Color — three-color system (colors.css) ===== */
  --cw-c1: #000a16; /* black — base / background (60%) */
  --cw-c2: #b08300; /* gold — selection / accent (10%) */
  --cw-c3: #ffffff; /* white — text / detail (30%) */

  --cw-bg: var(--cw-c1);
  --cw-text: var(--cw-c3);
  --cw-accent: var(--cw-c2);

  --cw-navy-1: #0c1a2c;
  --cw-navy-2: #000a16;
  --cw-surface-modal: linear-gradient(160deg, var(--cw-navy-1), var(--cw-navy-2));

  --cw-glass-fill: rgba(255, 255, 255, 0.06);
  --cw-glass-border: rgba(255, 255, 255, 0.14);
  --cw-glass-border-hover: rgba(255, 255, 255, 0.22);
  --cw-glass-highlight: rgba(255, 255, 255, 0.22);

  --cw-scrim: rgba(0, 10, 22, 0.55);
  --cw-tile-bg: #ffffff;

  /* Agent identity colors — fixed per agent */
  --cw-guida: #0f3d63;
  --cw-aiuto: #c15b34;
  --cw-presto: #7f9a3e;
  --cw-tempo: #2f8ba0;
  --cw-voce: #8a3f8f;
  --cw-cecilia: #2e5c3a;

  /* ===== Typography (typography.css) ===== */
  --cw-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cw-weight-body: 400;
  --cw-weight-button: 500;
  --cw-weight-header: 600;
  --cw-header-size: 32px;
  --cw-header-tracking: 2px;
  --cw-header-transform: uppercase;
  --cw-body-size: 15px;
  --cw-body-tracking: 2px;
  --cw-body-line: 1.7;
  --cw-button-transform: uppercase;
  --cw-button-tracking: 1.5px;
  --cw-size-eyebrow: 12px;
  --cw-size-small: 13px;
  --cw-size-lead: 18px;
  --cw-size-display: 48px;

  /* ===== Spacing & radius (spacing.css) ===== */
  --cw-space-1: 4px;
  --cw-space-2: 8px;
  --cw-space-3: 12px;
  --cw-space-4: 16px;
  --cw-space-5: 24px;
  --cw-space-6: 32px;
  --cw-space-7: 48px;
  --cw-space-8: 64px;
  --cw-space-9: 96px;
  --cw-radius: 10px;
  --cw-modal-side-gap: 300px;
  --cw-modal-max: 1040px;

  /* ===== Effects (effects.css) ===== */
  --cw-glass-blur: blur(18px) saturate(140%);
  --cw-card-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
  --cw-card-shadow-hover: 0 30px 60px -28px rgba(0, 0, 0, 0.95);
  --cw-card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --cw-scrim-blur: blur(6px);
  --cw-tile-shadow: none;
  --cw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cw-dur: 240ms;
  --cw-icon-hover-scale: 1.08;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("Montserrat");
}