/* WhichM365 visual foundation.
 * Semantic tokens are the source of truth. Legacy aliases keep existing pages
 * visually stable while components migrate in medium-sized stages.
 */
:root {
  color-scheme: light dark;

  /* Color roles */
  --color-canvas: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-text: #161B24;
  --color-text-strong: #07080C;
  --color-text-muted: #687080;
  --color-border: #DDE1E8;
  --color-accent: #FF5C35;
  --color-accent-hover: #E84727;
  --color-accent-bright: #FF7656;
  --color-accent-soft: #FFF0EC;
  --color-accent-muted: #FFD8CE;
  --color-positive: #15803D;
  --color-warning: #C2410C;
  --color-on-accent: #07080C;

  /* Typography */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: .74rem;
  --text-sm: .82rem;
  --text-md: .92rem;
  --text-base: 1rem;
  --text-lg: 1.05rem;
  --text-xl: 1.5rem;
  --text-display: clamp(2.15rem, 6vw, 3.75rem);

  /* Spacing */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.8rem;

  /* Shape and depth */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
  --shadow-content: 0 18px 60px rgba(7, 8, 12, .12);
  --shadow-subtle: 0 8px 24px rgba(7, 8, 12, .10);
  --shadow-elevated: 0 22px 70px rgba(7, 8, 12, .14);
  --focus-ring: 0 0 0 3px rgba(255, 92, 53, .32);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 150ms;
  --duration-reveal: 500ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-reveal: cubic-bezier(.22, .61, .36, 1);

  /* Layout */
  --container-app: 1000px;
  --container-content: 760px;
  --container-advisor: 640px;

  /* Compatibility aliases for the existing application and content pages */
  --orange: var(--color-accent);
  --orange-d: var(--color-accent-hover);
  --orange-l: var(--color-accent-bright);
  --orange-pale: var(--color-accent-soft);
  --black: var(--color-text-strong);
  --charcoal: #161B24;
  --ink: var(--color-text);
  --page: var(--color-canvas);
  --card: var(--color-surface);
  --navy: #07080C;
  --entnavy: #161B24;
  --msblue: var(--color-accent);
  --bizblue: var(--color-accent-bright);
  --ice: var(--color-accent-soft);
  --ice2: var(--color-accent-muted);
  --line: var(--color-border);
  --good: #F6A35B;
  --better: #FF7B50;
  --best: #FF5C35;
  --amber: var(--color-warning);
  --slate: var(--color-text-muted);
  --white: #FFFFFF;
  --green: var(--color-positive);
  --shadow: var(--shadow-elevated);
  --shadow-sm: var(--shadow-subtle);
  --display: var(--font-display);
  --serif: var(--font-editorial);
  --sp-1: 1.5rem;
  --sp-2: .9rem;
  --sp-3: 1.4rem;
  --sp-4: 2rem;
  --sp-5: 2.8rem;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #07080C;
  --color-surface: #10131A;
  --color-surface-raised: #161B24;
  --color-text: #F7F8FA;
  --color-text-strong: #FFFFFF;
  --color-text-muted: #C7CCD6;
  --color-border: #2A303B;
  /* --black aliases --color-text-strong for light mode, but it is used as the
     footer background, so keep it dark here rather than following the lightened
     strong-text token. */
  --black: #07080C;
  --color-accent-soft: #211512;
  --color-accent-muted: #321C17;
  --color-warning: #FFB454;
  --shadow-content: 0 24px 80px rgba(0, 0, 0, .55);
  --shadow-subtle: 0 10px 30px rgba(0, 0, 0, .38);
  --shadow-elevated: 0 24px 80px rgba(0, 0, 0, .55);
  --focus-ring: 0 0 0 3px rgba(255, 92, 53, .38);
}