/* =============================================================================
   MICROSOFT SERVICES — Palette & Design Tokens (service landing pages)
   =============================================================================
   Scope   : tokens, fonts and per-service themes for the Microsoft *service* pages
             (migration, day-to-day administration, implementations).
   Loaded  : by app/templates/products/microsoft/services/_msv_layout.html.
   Pairs   : components (.msv-*) live in app/static/css/tailwind-input.css under
             "MICROSOFT SERVICES — Design System components".
   Not to be confused with the older Microsoft product pages (.ms-*, --ms-*).
   Source  : Fluent 2 tokens (@fluentui/tokens: brandWeb ramp, grey scale, shared
             palette) cross-checked with microsoft.com (Oct 2026): ink #0e1726,
             hero #fffcf9, dark button #091f2c, links #0067b8, 8px radius, Segoe UI
             Variable, headings at weight 500.
   Fonts   : Segoe UI Variable is licensed by Microsoft and is NOT self-hosted;
             the stack falls back to the system UI font.

   HOW TO ADD A NEW MICROSOFT SERVICE PAGE
   1. Add `.msv-theme-<slug>` in section 5 only if it needs a new accent.
   2. Create the template extending services/_msv_layout.html with an `msv` config.
   3. Add translations, route, mapper/search entries, and run the tests.
   NEVER hard-code a hex value in .msv-* component rules; use a token from here.
   ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     1. BRAND RAMP (Fluent 2 brandWeb)
     ------------------------------------------------------------------------- */
  --msv-brand-40: #0c3b5e;
  --msv-brand-50: #0e4775;
  --msv-brand-60: #0f548c;
  --msv-brand-70: #115ea3;   /* Pressed / gradient anchor */
  --msv-brand-80: #0f6cbd;   /* Primary brand (white text 5.4:1) */
  --msv-brand-90: #2886de;
  --msv-brand-100: #479ef5;
  --msv-brand-110: #62abf5;  /* Links and small text on dark (7:1 on #091f2c) */
  --msv-brand-130: #96c6fa;
  --msv-brand-150: #cfe4fa;
  --msv-brand-160: #ebf3fc;  /* Tint backgrounds */
  --msv-blue-classic: #0078d4;   /* Legacy "Microsoft blue" (Azure / Fluent shared) */

  /* -------------------------------------------------------------------------
     2. NEUTRALS (Fluent grey scale)
     ------------------------------------------------------------------------- */
  --msv-grey-12: #1f1f1f;
  --msv-grey-16: #292929;
  --msv-grey-26: #424242;    /* Body text on light (9.7:1 on white) */
  --msv-grey-38: #616161;    /* Muted text on light (6.2:1 on white) */
  --msv-grey-78: #c7c7c7;
  --msv-grey-88: #e0e0e0;    /* Card borders */
  --msv-grey-94: #f0f0f0;
  --msv-grey-98: #fafafa;    /* Alternate section background */
  --msv-white: #ffffff;

  /* microsoft.com measured values */
  --msv-ink: #0e1726;        /* Headings on light */
  --msv-ink-dark: #091f2c;   /* Primary button / dark band */
  --msv-link: #0067b8;       /* Links on light */
  --msv-hero-cream: #fffcf9; /* Hero background */

  /* -------------------------------------------------------------------------
     3. LOGO COLORS (decorative only: logo mark, visual tiles)
     ------------------------------------------------------------------------- */
  --msv-logo-red: #f25022;
  --msv-logo-green: #7fba00;
  --msv-logo-blue: #00a4ef;
  --msv-logo-yellow: #ffb900;

  /* -------------------------------------------------------------------------
     4. SHARED ACCENTS (Fluent shared palette) — product themes only.
        Cool hues only (blue/teal/cornflower/purple/green): no red or orange,
        which belong to Red Hat pages. Guarded by tests/test_brand_palettes.py.
     ------------------------------------------------------------------------- */
  --msv-teal: #038387;
  --msv-light-teal: #00b7c3;
  --msv-cornflower: #4f6bed;
  --msv-purple: #5c2e91;
  --msv-green: #107c10;

  /* -------------------------------------------------------------------------
     5. SEMANTIC TOKENS — what components consume
     ------------------------------------------------------------------------- */
  --msv-brand: var(--msv-brand-80);
  --msv-brand-hover: var(--msv-brand-70);
  --msv-brand-tint: var(--msv-brand-160);
  --msv-brand-on-dark: var(--msv-brand-110);

  --msv-surface-hero: var(--msv-hero-cream);
  --msv-surface-light: var(--msv-white);
  --msv-surface-alt: var(--msv-grey-98);
  --msv-surface-dark: var(--msv-ink-dark);
  --msv-surface-dark-2: var(--msv-brand-40);

  --msv-text-heading: var(--msv-ink);
  --msv-text-body: var(--msv-grey-26);
  --msv-text-muted: var(--msv-grey-38);
  --msv-text-on-dark: var(--msv-white);
  --msv-text-on-dark-muted: rgba(255, 255, 255, 0.78);

  --msv-border: var(--msv-grey-88);
  --msv-border-on-dark: rgba(255, 255, 255, 0.16);

  --msv-gradient-dark: linear-gradient(160deg, #091f2c 0%, #0c3b5e 100%);
  --msv-gradient-cta: linear-gradient(110deg, #0c3b5e 0%, #0f6cbd 60%, #2886de 100%);

  --msv-font-display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --msv-font-text: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --msv-radius-sm: 4px;
  --msv-radius-md: 8px;
  --msv-radius-lg: 16px;
  --msv-shadow-card: 0 1px 2px rgba(9, 31, 44, 0.06), 0 8px 24px rgba(9, 31, 44, 0.06);
  --msv-shadow-card-hover: 0 2px 4px rgba(9, 31, 44, 0.08), 0 20px 40px rgba(9, 31, 44, 0.14);
  --msv-ease: 0.3s ease;

  /* Theme hooks — defaults (overridden by .msv-theme-*) */
  --msv-accent: var(--msv-brand);
  --msv-accent-2: var(--msv-blue-classic);
  --msv-hero-glow: rgba(15, 108, 189, 0.16);
  --msv-hero-glow-2: rgba(71, 158, 245, 0.14);
}

/* =============================================================================
   6. SERVICE THEMES — secondary accent + hero glow per product family
   ============================================================================= */

/* Microsoft 365 (brand blue) */
.msv-theme-m365 {
  --msv-accent-2: var(--msv-brand-90);
  --msv-hero-glow: rgba(15, 108, 189, 0.16);
  --msv-hero-glow-2: rgba(71, 158, 245, 0.14);
}

/* Azure (cloud blue) */
.msv-theme-azure {
  --msv-accent-2: var(--msv-blue-classic);
  --msv-hero-glow: rgba(0, 120, 212, 0.18);
  --msv-hero-glow-2: rgba(0, 183, 195, 0.16);
}

/* Intune / endpoint (teal) */
.msv-theme-intune {
  --msv-accent-2: var(--msv-teal);
  --msv-hero-glow: rgba(3, 131, 135, 0.16);
  --msv-hero-glow-2: rgba(15, 108, 189, 0.14);
}

/* Defender / Sentinel (security, cornflower) */
.msv-theme-security {
  --msv-accent-2: var(--msv-cornflower);
  --msv-hero-glow: rgba(79, 107, 237, 0.16);
  --msv-hero-glow-2: rgba(0, 164, 239, 0.14);
}

/* Services hub */
.msv-theme-hub {
  --msv-accent-2: var(--msv-blue-classic);
  --msv-hero-glow: rgba(15, 108, 189, 0.16);
  --msv-hero-glow-2: rgba(71, 158, 245, 0.12);
}