/* ──────────────────────────────────────────────────────────────────
 * Microsoft Fluent 2 — Colors and Typography
 * Tokens follow Fluent UI v9's @fluentui/tokens naming where possible.
 * ────────────────────────────────────────────────────────────────── */

/* Inter Tight stands in for Segoe UI Variable.
   Source Serif 4 stands in for Segoe Serif Italic.
   Replace with licensed Segoe fonts when available. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,wght@1,400;1,600&display=swap");

:root {
  /* ── Fonts ─────────────────────────────────────────── */
  --font-sans: "Inter Tight", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif-italic: "Source Serif 4", "Segoe Serif", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --font-display: "Inter Tight", "Segoe Sans", "Inter Tight", sans-serif;

  /* ── Brand: Communication Blue ─────────────────────── */
  --brand-10: #061724;
  --brand-20: #082338;
  --brand-30: #0C3B5E;
  --brand-40: #0F548C;
  --brand-50: #115EA3;
  --brand-60: #0F6CBD;     /* primary */
  --brand-70: #2886DE;
  --brand-80: #479EF5;
  --brand-90: #62ABF5;
  --brand-100: #77B7F7;
  --brand-110: #96C6FA;
  --brand-120: #B4D6FA;
  --brand-130: #CFE4FA;
  --brand-140: #EBF3FC;    /* selected tint */
  --brand-150: #F6FAFE;
  --brand-160: #F6FAFE;

  /* Convenience aliases */
  --accent: var(--brand-60);
  --accent-hover: var(--brand-50);
  --accent-pressed: var(--brand-40);
  --accent-selected: var(--brand-140);

  /* ── Neutrals (greys) ──────────────────────────────── */
  --grey-0: #FFFFFF;
  --grey-2: #FAFAFA;
  --grey-4: #F5F5F5;
  --grey-6: #F0F0F0;
  --grey-8: #EBEBEB;
  --grey-10: #E0E0E0;
  --grey-14: #D1D1D1;
  --grey-16: #C7C7C7;
  --grey-18: #BDBDBD;
  --grey-22: #B3B3B3;
  --grey-30: #999999;
  --grey-38: #757575;
  --grey-44: #616161;
  --grey-50: #575757;
  --grey-58: #424242;
  --grey-68: #333333;
  --grey-74: #292929;
  --grey-78: #242424;
  --grey-82: #1F1F1F;
  --grey-88: #141414;
  --grey-94: #0A0A0A;
  --grey-100: #000000;

  /* ── Semantic surface tokens ──────────────────────── */
  --bg-canvas: #F0F0F0;
  --bg-1: #FFFFFF;
  --bg-2: #FAFAFA;
  --bg-3: #F5F5F5;
  --bg-4: #F0F0F0;
  --bg-disabled: #F0F0F0;
  --bg-subtle-hover: #F5F5F5;
  --bg-subtle-pressed: #E0E0E0;

  /* ── Foreground tokens ─────────────────────────────── */
  --fg-1: #242424;
  --fg-2: #424242;
  --fg-3: #616161;
  --fg-4: #757575;
  --fg-disabled: #BDBDBD;
  --fg-on-accent: #FFFFFF;
  --fg-link: var(--brand-60);
  --fg-link-hover: var(--brand-50);

  /* ── Stroke / border tokens ────────────────────────── */
  --stroke-1: #D1D1D1;
  --stroke-2: #E0E0E0;
  --stroke-subtle: #EBEBEB;
  --stroke-accessible: #616161;        /* input bottom border */
  --stroke-accessible-hover: #424242;
  --stroke-disabled: #E0E0E0;
  --stroke-focus-outer: #242424;
  --stroke-focus-inner: #FFFFFF;

  /* ── Status colors ─────────────────────────────────── */
  --danger: #C50F1F;
  --danger-bg: #FDF3F4;
  --danger-border: #EEACB2;
  --success: #107C10;
  --success-bg: #F1FAF1;
  --success-border: #9FD89F;
  --warning: #F7630C;
  --warning-bg: #FFF9F5;
  --warning-border: #FDCFB4;
  --info: var(--brand-60);
  --info-bg: var(--brand-140);

  /* Marketing accent (rarely used in chrome) */
  --magenta: #E3008C;

  /* ── Spacing (4px base) ────────────────────────────── */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-s-nudge: 6px;
  --space-s: 8px;
  --space-m-nudge: 10px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;

  /* ── Corner radii ──────────────────────────────────── */
  --radius-none: 0;
  --radius-small: 2px;
  --radius-medium: 4px;     /* default — buttons, inputs, cards */
  --radius-large: 8px;
  --radius-xlarge: 12px;
  --radius-xxlarge: 24px;   /* marketing/onboarding cards */
  --radius-circular: 9999px;

  /* ── Shadows / elevation ───────────────────────────── */
  --shadow-2:  0 0 2px rgba(0,0,0,.12), 0 1px 2px  rgba(0,0,0,.14);
  --shadow-4:  0 0 2px rgba(0,0,0,.12), 0 2px 4px  rgba(0,0,0,.14);
  --shadow-8:  0 0 2px rgba(0,0,0,.12), 0 4px 8px  rgba(0,0,0,.14);
  --shadow-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
  --shadow-28: 0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.14);
  --shadow-64: 0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14);
  /* Brand-tinted variants for selected/elevated brand surfaces */
  --shadow-brand-4: 0 0 2px rgba(15,108,189,.30), 0 2px 4px rgba(15,108,189,.18);

  /* ── Motion ────────────────────────────────────────── */
  --duration-ultra-fast: 50ms;
  --duration-faster: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 400ms;
  --ease-easy: cubic-bezier(0.33, 0, 0.67, 1);
  --ease-accelerate: cubic-bezier(0.7, 0, 1, 0.5);
  --ease-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
  --ease-max: cubic-bezier(0.8, 0, 0.78, 1);

  /* ── Type ramp (Fluent names) ──────────────────────── */
  /* size / line-height / weight */
  --type-caption2:       400 10px/14px var(--font-sans);
  --type-caption1:       400 12px/16px var(--font-sans);
  --type-caption1-strong:600 12px/16px var(--font-sans);
  --type-body1:          400 14px/20px var(--font-sans);
  --type-body1-strong:   600 14px/20px var(--font-sans);
  --type-body2:          400 16px/22px var(--font-sans);
  --type-subtitle2:      600 16px/22px var(--font-sans);
  --type-subtitle1:      600 20px/28px var(--font-sans);
  --type-title3:         600 24px/32px var(--font-sans);
  --type-title2:         600 28px/36px var(--font-sans);
  --type-title1:         700 40px/52px var(--font-sans);
  --type-large-title:    700 56px/80px var(--font-sans);
  --type-display:        700 68px/92px var(--font-sans);
}

/* ── Semantic typography utility classes ────────────── */
.fl-display     { font: var(--type-display);     letter-spacing: -0.04em; color: var(--fg-1); }
.fl-large-title { font: var(--type-large-title); letter-spacing: -0.04em; color: var(--fg-1); }
.fl-title1      { font: var(--type-title1);      letter-spacing: -0.02em; color: var(--fg-1); }
.fl-title2      { font: var(--type-title2);      letter-spacing: -0.02em; color: var(--fg-1); }
.fl-title3      { font: var(--type-title3);      letter-spacing: -0.02em; color: var(--fg-1); }
.fl-subtitle1   { font: var(--type-subtitle1);   letter-spacing: -0.01em; color: var(--fg-1); }
.fl-subtitle2   { font: var(--type-subtitle2);   letter-spacing: -0.01em; color: var(--fg-1); }
.fl-body2       { font: var(--type-body2);       letter-spacing: -0.005em; color: var(--fg-1); }
.fl-body1-strong{ font: var(--type-body1-strong); color: var(--fg-1); }
.fl-body1       { font: var(--type-body1);       color: var(--fg-1); }
.fl-caption1-strong { font: var(--type-caption1-strong); color: var(--fg-2); }
.fl-caption1    { font: var(--type-caption1);    color: var(--fg-2); }
.fl-caption2    { font: var(--type-caption2);    color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; }

.fl-italic-serif { font-family: var(--font-serif-italic); font-style: italic; }

/* Default body */
html, body {
  font: var(--type-body1);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Standard semantic resets */
h1 { font: var(--type-title1); letter-spacing: -0.02em; margin: 0 0 var(--space-l); }
h2 { font: var(--type-title2); letter-spacing: -0.02em; margin: 0 0 var(--space-m); }
h3 { font: var(--type-title3); letter-spacing: -0.02em; margin: 0 0 var(--space-m); }
h4 { font: var(--type-subtitle1); letter-spacing: -0.01em; margin: 0 0 var(--space-s); }
h5 { font: var(--type-subtitle2); letter-spacing: -0.01em; margin: 0 0 var(--space-s); }
h6 { font: var(--type-body1-strong); margin: 0 0 var(--space-xs); }
p  { margin: 0 0 var(--space-m); }
a  { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }
code, pre { font-family: var(--font-mono); font-size: 13px; }

/* Focus ring (Fluent double ring) */
.fl-focus:focus-visible,
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--stroke-focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--stroke-focus-inner) inset;
}