/* ───────────────────────────────────────────────────────────────────────────
   One Abu Dhabi — the federated intelligence system
   Palette and type sampled from the pitch deck itself: violet #4732B8 and
   crimson #CD3152 over violet-tinted surfaces, set in Alexandria + Montserrat.
   ─────────────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  /* ── Brand ───────────────────────────────────────────────────────────── */
  --brand-violet:      #4732B8;   /* primary action + headings            */
  --brand-violet-deep: #2E1F7A;   /* gradient floor, pressed state        */
  --brand-crimson:     #CD3152;   /* accent, emphasis                     */
  --brand-gold:        #FEC700;   /* highlight, sparingly                 */
  --brand-ink:         #0A0015;   /* near-black with a violet cast        */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --surface-canvas:    #F6F3FF;   /* page ground                          */
  --surface-card:      #FFFFFF;
  --surface-tint:      #F0ECFA;   /* sunken / table headers               */
  --surface-rose:      #FDF2F5;   /* accent wash                          */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --text-primary:      var(--brand-ink);
  --text-secondary:    #4A4458;
  --text-tertiary:     #7A7490;
  --text-on-brand:     #FFFFFF;
  --text-link:         var(--brand-violet);

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --line-strong:       #C9BFEA;
  --line:              #E4DEF5;
  --line-soft:         #F0ECFA;

  /* ── Feedback ────────────────────────────────────────────────────────── */
  --feedback-positive: #0F7A3D;
  --feedback-warning:  #B26A00;
  --feedback-negative: #B3122F;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Alexandria", "Montserrat", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --fs-h1: 4rem; --fs-h2: 3rem; --fs-h3: 2.25rem; --fs-h4: 1.75rem;
  --fs-h5: 1.375rem; --fs-h6: 1.125rem;
  --fs-body-1: 1.25rem; --fs-body-2: 1rem; --fs-body-3: .9375rem;
  --fs-cta-1: 1rem; --fs-cta-2: .75rem; --fs-label: .75rem;
  --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.5; --lh-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-body: 0; --tracking-cta: 0.04em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-xxs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem;
  --space-l: 2rem; --space-xl: 3rem; --space-xxl: 4rem; --space-xxxl: 7.5rem;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-xs: 6px; --radius-s: 10px; --radius-m: 14px; --radius-l: 20px;
  --radius-pill: 999px; --radius-circle: 50%;

  /* ── Elevation — violet-tinted, so shadows sit in the palette ────────── */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(10,0,21,.04), 0 8px 24px rgba(71,50,184,.05);
  --elev-2: 0 2px 4px rgba(10,0,21,.05), 0 12px 32px rgba(71,50,184,.08);
  --elev-3: 0 4px 8px rgba(10,0,21,.06), 0 18px 44px rgba(71,50,184,.12);
  --elev-4: 0 8px 16px rgba(10,0,21,.08), 0 28px 60px rgba(71,50,184,.16);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dur-short-1: 100ms; --dur-short-2: 200ms;
  --dur-medium-1: 300ms; --dur-medium-2: 400ms;
  --dur-long-1: 500ms; --dur-long-2: 700ms;

  /* ── Legacy aliases ──────────────────────────────────────────────────────
     The UI was authored against the previous token names. Mapping them here
     re-themes every surface without touching hundreds of call sites; new work
     should use the semantic names above.                                     */
  --ead-palm: var(--brand-violet);
  --ead-aubergine: var(--brand-violet-deep);
  --ead-orange: var(--brand-crimson);
  --ead-sandstone: var(--surface-canvas);
  --ead-white: var(--surface-card);
  --ead-black: var(--brand-ink);
  --ead-grey-1: var(--text-secondary);
  --ead-grey-2: var(--text-tertiary);
  --ead-grey-3: var(--line-strong);
  --ead-grey-4: var(--line-soft);
  --ead-grey-5: var(--surface-tint);
  --ead-positive: var(--feedback-positive);
  --ead-warning: var(--feedback-warning);
  --ead-negative: var(--feedback-negative);
  --color-action-primary-enabled: var(--brand-violet);
  --color-action-primary-hover: #3B2899;
  --color-action-primary-pressed: var(--brand-violet-deep);
  --color-surface-default: var(--surface-card);
  --color-surface-sunken: var(--surface-tint);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-on-brand: var(--text-on-brand);
  --color-text-link: var(--text-link);
  --color-border-light: var(--line-soft);
  --color-border-dark: var(--line-strong);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-3);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headlines carry the display face; body copy stays in Montserrat. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h2); }
h2, .h2 { font-size: var(--fs-h4); }
h3, .h3 { font-size: var(--fs-h5); }
h4, h5, .h4, .h5 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
                   line-height: var(--lh-heading); margin: 0; }
.eyebrow { font-size: var(--fs-cta-2); font-weight: var(--fw-medium);
           letter-spacing: .18em; text-transform: uppercase; color: var(--text-secondary); }
code, .code { font-family: var(--font-mono); font-size: .9375em;
              background: var(--surface-tint); border-radius: var(--radius-xs);
              padding: .1em .35em; }