/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

@config "../tailwind.config.js";
@import "tailwindcss";
@import "react18-json-view/src/style.css";

/* Smokeball Design Framework brand fonts (DES-631): Inter for body/UI/caption, Poppins for
 * headings, so rendering matches the design system on every platform instead of falling back to
 * Segoe UI. The @font-face rules are copied from @fontsource/inter and @fontsource/poppins
 * (latin + latin-ext subsets, only the weights declared below) rather than @import-ed, because the
 * Tailwind CLI would rewrite the package's relative url()s to paths that resolve nowhere. The
 * root-relative /files/ urls are satisfied by CopyWebpackPlugin (webpack.common.js) in the app
 * and by staticDirs (.storybook/main.ts) in Storybook; publicPath is always "/". Non-latin
 * scripts fall back to the Segoe UI stack. */
/* inter-latin-ext-400-normal */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/files/inter-latin-ext-400-normal.woff2) format("woff2"), url(/files/inter-latin-ext-400-normal.woff) format("woff");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/files/inter-latin-400-normal.woff2) format("woff2"), url(/files/inter-latin-400-normal.woff) format("woff");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* inter-latin-ext-400-italic */
@font-face {
  font-family: Inter;
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/files/inter-latin-ext-400-italic.woff2) format("woff2"), url(/files/inter-latin-ext-400-italic.woff) format("woff");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-italic */
@font-face {
  font-family: Inter;
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/files/inter-latin-400-italic.woff2) format("woff2"), url(/files/inter-latin-400-italic.woff) format("woff");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/files/inter-latin-ext-600-normal.woff2) format("woff2"), url(/files/inter-latin-ext-600-normal.woff) format("woff");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/files/inter-latin-600-normal.woff2) format("woff2"), url(/files/inter-latin-600-normal.woff) format("woff");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* poppins-latin-ext-600-normal */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/files/poppins-latin-ext-600-normal.woff2) format("woff2"), url(/files/poppins-latin-ext-600-normal.woff) format("woff");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* poppins-latin-600-normal */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/files/poppins-latin-600-normal.woff2) format("woff2"), url(/files/poppins-latin-600-normal.woff) format("woff");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html,
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: Inter, "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}

*::before {
  box-sizing: border-box;
}

#container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

@utility auto-min-h {
  height: var(--auto-min-height);
  min-height: 0;
}

/* Smokeball Design Framework type scale — role-based text styles.
 * Each bundles the framework's font-size + line-height + weight for a named role, so usage is a
 * single class (e.g. `text-heading-h1`, `text-body-ui`). Font-family follows the theme stacks
 * (`--font-heading` → Poppins / `--font-sans` → Inter). `*-semibold` variants
 * exist wherever the framework emits them; the unsuffixed body styles are the regular (400) weight.
 */
@utility text-heading-h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 600;
}

@utility text-heading-h2 {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 600;
}

@utility text-heading-h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

@utility text-body-paragraph {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

@utility text-body-paragraph-semibold {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

@utility text-body-ui {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}

@utility text-body-ui-semibold {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

@utility text-body-caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
}

@utility text-body-caption-semibold {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

/* The `@theme inline` block exposes CSS custom properties that Tailwind resolves
 * through `var(--color-*)` tokens. Runtime updates from `office-theme.ts` rewrite
 * the `--background`, `--foreground`, and neutral scale values as Outlook themes
 * change. To add a new semantic token (for example `--color-info`), define it here
 * and mirror its underlying `--foo` source in both the `:root` and `.dark` blocks.
 */
@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  /* Smokeball Design Framework semantic colours, exposed as Tailwind utilities under the `ds-`
   * namespace so they never collide with the shadcn semantic tokens above (which are host-driven).
   * Each resolves to a `--ds-*` custom property whose light/dark values live in the `:root` / `.dark`
   * blocks below. Roles map to the framework thus:
   *   fills / surfaces  → `bg-ds-*`   (bg-ds-surface, bg-ds-accent, bg-ds-danger-subtle, …)
   *   foreground / icon → `text-ds-*` (text-ds-fg, text-ds-fg-danger, text-ds-fg-subtle, …)
   *   borders           → `border-ds-*` (border-ds-border, border-ds-border-danger, …)
   * Accent/danger/success/warning use the fixed framework palette; neutral-derived roles use the
   * host-adaptive neutrals so text/surfaces/borders keep tracking the Outlook theme. */
  /* Neutral-derived roles are inlined as `hsl(var(--neutral-*))` (not indirected through a `--ds-*`
   * property). `@theme inline` bakes this expression straight into each utility, so `var(--neutral-*)`
   * resolves at the *consuming* element and therefore flips with the adaptive scale under `.dark`.
   * (A `--ds-*` alias declared only on `:root` would freeze the light value and never flip.) */
  --color-ds-fg: hsl(var(--neutral-850));
  --color-ds-fg-subtle: hsl(var(--neutral-500));
  --color-ds-fg-disabled: hsl(var(--neutral-400));
  --color-ds-fg-placeholder: hsl(var(--neutral-400));
  --color-ds-fg-inverse: #fff;
  --color-ds-surface: hsl(var(--neutral-20));
  --color-ds-surface-overlay: hsl(var(--neutral-50));
  --color-ds-surface-canvas: hsl(var(--neutral-50));
  --color-ds-neutral: hsl(var(--neutral-100));
  --color-ds-border: hsl(var(--neutral-100));
  --color-ds-border-subtle: hsl(var(--neutral-50));
  --color-ds-border-input: hsl(var(--neutral-200));

  /* Fixed brand roles indirect through `--ds-*` so they flip via the `.dark` overrides below. */
  --color-ds-fg-accent: var(--ds-fg-accent);
  --color-ds-fg-accent-hover: var(--ds-fg-accent-hover);
  --color-ds-fg-danger: var(--ds-fg-danger);
  --color-ds-fg-success: var(--ds-fg-success);
  --color-ds-fg-warning: var(--ds-fg-warning);
  --color-ds-accent: var(--ds-bg-accent);
  --color-ds-accent-hover: var(--ds-bg-accent-hover);
  --color-ds-accent-pressed: var(--ds-bg-accent-pressed);
  --color-ds-accent-subtle: var(--ds-bg-accent-subtle);
  --color-ds-danger: var(--ds-bg-danger);
  --color-ds-danger-subtle: var(--ds-bg-danger-subtle);
  --color-ds-danger-bold: var(--ds-bg-danger-bold);
  --color-ds-success: var(--ds-bg-success);
  --color-ds-success-subtle: var(--ds-bg-success-subtle);
  --color-ds-success-bold: var(--ds-bg-success-bold);
  --color-ds-warning: var(--ds-bg-warning);
  --color-ds-warning-subtle: var(--ds-bg-warning-subtle);
  --color-ds-warning-bold: var(--ds-bg-warning-bold);

  --color-ds-border-focus: var(--ds-border-focus);
  /* Focus-ring colours: blue-200 / red-100 — translucent focus indicators. Inlined (light-only,
   * like the framework's border-focused-subtle) rather than flipped. */
  --color-ds-border-focus-subtle: #aed2fe;
  --color-ds-border-danger-subtle: var(--ds-border-danger-subtle);
  --color-ds-border-accent: var(--ds-border-accent);
  --color-ds-border-danger: var(--ds-border-danger);
  --color-ds-border-success: var(--ds-border-success);
  --color-ds-border-warning: var(--ds-border-warning);

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-slide-from-left: slide-from-left 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895);
  --animate-slide-to-left: slide-to-left 0.25s cubic-bezier(0.82, 0.085, 0.395, 0.895);
  --animate-move: move 2s infinite cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Container */
  --container-center: true;
  --container-padding: 2rem;
  --container-screen-2xl: 1400px;

  /* Custom breakpoints */
  --breakpoint-3xl: 1792px;
  --breakpoint-4xl: 2048px;


  /* Shadows */
  --shadow-menu: 0px 4px 8px 0px #0000003D;
  --shadow-modal: 0px 4px 8px 0px #0000003D, 0px 0px 1px 0px #00000052;

  /* Modal background shadow color */
  --color-modal-background-shadow: hsl(0 0% 22% / 0.6);
  --color-modal-overlay: var(--color-modal-background-shadow);

   /* Border radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Typography — Smokeball Design Framework.
   * DES-631: the framework's brand fonts ship as @font-face rules copied from @fontsource at the
   * top of this file (see that comment for why they are not @import-ed): Inter for body/UI/caption,
   * Poppins Semi-Bold for headings, with the Segoe UI system stack as fallback while the webfonts
   * load. Role-based styles (text-heading-h1, text-body-ui, …) are defined as `@utility` blocks
   * below.
   */
  --font-sans: Inter, "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", sans-serif;
  --font-heading: Poppins, var(--font-sans);

  /* Framework font-size primitives (px shown for reference): xs 12, sm 14, base 16, md 20,
   * lg 24, xl 28, 2xl 32. Namespaced as `text-ds-*` so they never clobber Tailwind's defaults
   * (whose lg/xl/2xl differ and are relied on by existing components). Each carries its paired
   * framework line-height. */
  --text-ds-xs: 0.75rem;
  --text-ds-xs--line-height: 1rem;
  --text-ds-sm: 0.875rem;
  --text-ds-sm--line-height: 1.25rem;
  --text-ds-base: 1rem;
  --text-ds-base--line-height: 1.5rem;
  --text-ds-md: 1.25rem;
  --text-ds-md--line-height: 1.75rem;
  --text-ds-lg: 1.5rem;
  --text-ds-lg--line-height: 2rem;
  --text-ds-xl: 1.75rem;
  --text-ds-xl--line-height: 2.25rem;
  --text-ds-2xl: 2rem;
  --text-ds-2xl--line-height: 2.5rem;

  /* UI Library colors */
  --color-black: #000;
  --color-white: #fff;
  --color-transparent-overlay: hsla(0, 0%, 0%, 0.4);
  --color-segmented-control-background: hsl(223, 14%, 90%);

  --color-gray-100: #f2f2f2;
  --color-gray-200: #e6e6e6;
  --color-gray-300: #dadada;
  --color-gray-400: #c4c4c4;
  --color-gray-500: #999999;
  --color-gray-600: #666666;
  --color-gray-700: #4d4d4d;
  --color-gray-800: #333333;

  /* Brand & descriptive palette — realigned to the Smokeball Design Framework's exact hex values.
   * The framework's canonical steps (blue-50/200/400/500/600/700/900, cyan-50/100/200/500, …) are
   * defined for new work; the add-in's legacy step names (blue-160, cyan-40, red-550, …) and the
   * default-Tailwind steps that components already use (blue-500, red-500, …) are each pinned to
   * the *closest* framework hex by lightness, so existing classes render framework colours without
   * touching component code. Neutrals are deliberately NOT here — they stay host-adaptive via
   * `office-theme.ts`. */

  /* Primary (orange) */
  --color-orange-50: #feefe7;
  --color-orange-100: #fddfce;
  --color-orange-200: #fac09e;
  --color-orange-400: #f6803c;
  --color-orange-500: #f4610b;
  --color-orange-600: #c34d09;

  /* Cyan */
  --color-cyan-50: #edfafc;
  --color-cyan-40: #edfafc;
  --color-cyan-100: #c2edf5;
  --color-cyan-140: #c2edf5;
  --color-cyan-200: #96e1ee;
  --color-cyan-240: #96e1ee;
  --color-cyan-340: #96e1ee;
  --color-cyan-500: #21b0ca;
  --color-cyan-540: #21b0ca;

  /* Blue (accent) */
  --color-blue-50: #e1eeff;
  --color-blue-60: #e1eeff;
  --color-blue-100: #e1eeff;
  --color-blue-160: #aed2fe;
  --color-blue-200: #aed2fe;
  --color-blue-300: #aed2fe;
  --color-blue-360: #499afd;
  --color-blue-400: #499afd;
  --color-blue-460: #177efd;
  --color-blue-500: #177efd;
  --color-blue-560: #0265de;
  --color-blue-600: #0265de;
  --color-blue-660: #024eac;
  --color-blue-700: #024eac;
  --color-blue-900: #01234c;

  /* Neutral */
  --color-neutral-20: hsl(var(--neutral-20));
  --color-neutral-50: hsl(var(--neutral-50));
  --color-neutral-100: hsl(var(--neutral-100));
  --color-neutral-150: hsl(var(--neutral-150));
  --color-neutral-200: hsl(var(--neutral-200));
  --color-neutral-250: hsl(var(--neutral-250));
  --color-neutral-300: hsl(var(--neutral-300));
  --color-neutral-400: hsl(var(--neutral-400));
  --color-neutral-500: hsl(var(--neutral-500));
  --color-neutral-600: hsl(var(--neutral-600));
  --color-neutral-700: hsl(var(--neutral-700));
  --color-neutral-750: hsl(var(--neutral-750));
  --color-neutral-850: hsl(var(--neutral-850));
  --color-neutral-950: hsl(var(--neutral-950));

  /* Descriptive — green (success) */
  --color-green-50: #e9fcf4;
  --color-green-100: #d2f9e9;
  --color-green-200: #a4f4d3;
  --color-green-400: #49e9a6;
  --color-green-600: #16b673;
  --color-green-700: #118856;
  --color-green-800: #0b5b3a;
  --color-green-900: #073623;

  /* Yellow (warning) */
  --color-yellow-100: #fbf3b7;
  --color-yellow-150: #fbf3b7;
  --color-yellow-200: #f8eb87;
  --color-yellow-250: #f8eb87;
  --color-yellow-300: #f5e356;
  --color-yellow-350: #f5e356;
  --color-yellow-400: #f2db26;
  --color-yellow-450: #f2db26;
  --color-yellow-500: #d9c10d;
  --color-yellow-550: #d9c10d;
  --color-yellow-800: #484004;
  --color-yellow-850: #484004;
  --color-yellow-900: #302b03;

  /* Red (danger) */
  --color-red-50: #fde8e7;
  --color-red-100: #fabab8;
  --color-red-150: #fabab8;
  --color-red-200: #fabab8;
  --color-red-300: #f35e59;
  --color-red-400: #ef302a;
  --color-red-450: #ef302a;
  --color-red-500: #ef302a;
  --color-red-550: #d51710;
  --color-red-600: #d51710;
  --color-red-650: #d51710;
  --color-red-700: #d51710;
  --color-red-800: #470805;

  --color-black-5: rgba(0, 0, 0, 0.05);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-15: rgba(0, 0, 0, 0.15);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-70: rgba(0, 0, 0, 0.7);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-90: rgba(0, 0, 0, 0.9);

  /* Additional — pink & purple */
  --color-pink-100: #f8b9ce;
  --color-pink-150: #f8b9ce;
  --color-pink-400: #ea2e6d;
  --color-pink-450: #ea2e6d;

  --color-purple-200: #ddb4e4;
  --color-purple-400: #bb69c9;
  --color-purple-450: #bb69c9;
}

@layer base {
  /* Base light-theme defaults. These values represent our fallback palette when
   * Outlook has not yet provided theme colors. If you want to tweak the static
   * light appearance, adjust the tokens here and leave the runtime logic in
   * `office-theme.ts` unchanged so Outlook can still override them.
   */
  :root {
    color-scheme: light;
    --background: 223 28% 95%;
    --foreground: 222 26% 15%;

    --muted: 240 4.8% 95.9%;
    /* DES-631: subtle text = design framework Neutral.600 #4B5881 (was the shadcn zinc default,
     * which read as washed-out grey next to the design). */
    --muted-foreground: 226 26% 40%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 26% 15%;

    --card: 0 0% 100%;
    --card-foreground: 222 26% 15%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --primary: 213 98% 44%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 100%;
    --secondary-foreground: 213 98% 44%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 222 26% 15%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --ring: 213 98% 84%; /* blue-160 */

    --neutral-20: 240 20% 98%;
    --neutral-50: 223 28% 95%;
    --neutral-100: 222 26% 90%;
    --neutral-150: 222 26% 85%;
    --neutral-200: 222 26% 80%;
    --neutral-250: 222 26% 75%;
    --neutral-300: 222 26% 70%;
    --neutral-400: 222 26% 60%;
    --neutral-500: 222 26% 50%;
    --neutral-600: 222 26% 40%;
    --neutral-700: 222 26% 30%;
    --neutral-750: 222 26% 25%;
    --neutral-850: 222 26% 15%;
    --neutral-950: 222 26% 5%;

    --radius: 0.5rem;

    /* Design Framework semantic colours — fixed brand roles, LIGHT values.
     * (Neutral-derived roles — fg / surface / border / neutral fill — are NOT here: they are inlined
     * as `hsl(var(--neutral-*))` directly in the `@theme inline` block so they resolve per-element
     * and flip with the adaptive neutral scale. These fixed roles need explicit light/dark values
     * because brand hex don't flip on their own; `.dark` overrides only these.) */
    --ds-fg-accent: #0265de;
    --ds-fg-accent-hover: #177efd;
    --ds-fg-danger: #d51710;
    --ds-fg-success: #0b5b3a;
    --ds-fg-warning: #484004;

    --ds-bg-accent: #0265de;
    --ds-bg-accent-hover: #177efd;
    --ds-bg-accent-pressed: #024eac;
    --ds-bg-accent-subtle: #e1eeff;
    --ds-bg-danger: #d51710;
    --ds-bg-danger-subtle: #fde8e7;
    --ds-bg-danger-bold: #ef302a;
    --ds-bg-success: #0b5b3a;
    --ds-bg-success-subtle: #d2f9e9;
    --ds-bg-success-bold: #49e9a6;
    --ds-bg-warning: #484004;
    --ds-bg-warning-subtle: #fbf3b7;
    --ds-bg-warning-bold: #f2db26;

    --ds-border-focus: #0265de;
    --ds-border-danger-subtle: #fabab8;
    --ds-border-accent: #0265de;
    --ds-border-danger: #d51710;
    --ds-border-success: #0b5b3a;
    --ds-border-warning: #484004;
  }

  /* Dark theme overrides. When `office-theme.ts` detects a dark Outlook theme it
   * toggles the `dark` class on `document.documentElement`, which tells Tailwind
   * to apply this block. Only update these defaults if you need to change the
   * fallback experience; the dynamic neutral range and background still come from
   * the host theme at runtime.
   */
  .dark {
    color-scheme: dark;
    --background: 222 26% 10%;
    --foreground: 210 40% 96%;

    --muted: 220 18% 18%;
    --muted-foreground: 220 12% 73%;

    --popover: 222 26% 12%;
    --popover-foreground: 210 32% 95%;

    --card: 220 24% 14%;
    --card-foreground: 210 38% 96%;

    --border: 222 16% 24%;
    --input: 222 16% 24%;

    --primary: 213 98% 44%;
    --primary-foreground: 0 0% 98%;

    --secondary: 220 20% 18%;
    --secondary-foreground: 210 36% 95%;

    --accent: 220 28% 26%;
    --accent-foreground: 210 38% 95%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --ring: 213 98% 64%;

    --neutral-20: 222 22% 14%;
    --neutral-50: 222 22% 18%;
    --neutral-100: 222 22% 22%;
    --neutral-150: 222 22% 26%;
    --neutral-200: 222 22% 30%;
    --neutral-250: 222 22% 34%;
    --neutral-300: 222 22% 38%;
    --neutral-400: 222 22% 44%;
    --neutral-500: 222 22% 50%;
    --neutral-600: 222 22% 58%;
    --neutral-700: 222 22% 64%;
    --neutral-750: 222 22% 70%;
    --neutral-850: 222 22% 78%;
    --neutral-950: 222 22% 86%;

    --color-black-5: hsla(0 0% 100% / 0.06);
    --color-black-10: hsla(0 0% 100% / 0.1);
    --color-black-15: hsla(0 0% 100% / 0.15);
    --color-black-20: hsla(0 0% 100% / 0.2);
    --color-black-30: hsla(0 0% 100% / 0.3);
    --color-black-40: hsla(0 0% 100% / 0.4);
    --color-black-50: hsla(0 0% 100% / 0.5);
    --color-black-60: hsla(0 0% 100% / 0.6);
    --color-black-70: hsla(0 0% 100% / 0.7);
    --color-black-80: hsla(0 0% 100% / 0.8);
    --color-black-90: hsla(0 0% 100% / 0.9);

    /* Design Framework semantic colours — DARK. ONLY the fixed brand roles flip here; the
     * neutral-derived roles (fg / surface / border / neutral fill) intentionally inherit from
     * `:root` and track the adaptive neutral scale, which office-theme.ts rewrites for dark. */
    --ds-fg-accent: #499afd;
    --ds-fg-accent-hover: #499afd;
    --ds-fg-danger: #f35e59;
    --ds-fg-success: #49e9a6;
    --ds-fg-warning: #f2db26;

    --ds-bg-accent-hover: #0265de;
    --ds-bg-accent-pressed: #0265de;
    --ds-bg-accent-subtle: #01234c;
    --ds-bg-danger-subtle: #470805;
    --ds-bg-danger-bold: #ef302a;
    --ds-bg-success-subtle: #073623;
    --ds-bg-success-bold: #16b673;
    --ds-bg-warning-subtle: #302b03;
    --ds-border-danger-subtle: #470805;
    --ds-border-warning: #f2db26;

    --ds-border-danger: #f35e59;
    --ds-border-success: #49e9a6;
  }

  /* Keyframes for animations */
  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }

  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }

  @keyframes slide-from-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }

  @keyframes slide-to-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }

  @keyframes move {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
}

.ProseMirror {
  outline: none;
}

.suggestion-highlight, .unfocused-selection-highlight {
  @apply bg-blue-200 hover:bg-blue-300 dark:hover:bg-blue-400/50 dark:text-blue-50 dark:bg-blue-500/40;
}

/* Custom scrollbar styles to replace tailwind-scrollbar plugin */

/* Firefox only. In Chromium >= 121 the standard scrollbar-width/scrollbar-color properties
 * take precedence over the ::-webkit-scrollbar rules below, which on macOS degrades the
 * scrollbar to an invisible-until-scrolled overlay. Scoping them to browsers without
 * ::-webkit-scrollbar support keeps the styled, visible-on-overflow scrollbar everywhere else. */
@supports not selector(::-webkit-scrollbar) {
  .scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, #afb9d0) var(--scrollbar-track, transparent);
  }
}

.scrollbar::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track, transparent);
  border-radius: var(--scrollbar-track-radius, 0);
}

.scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, #afb9d0);
  border-radius: var(--scrollbar-thumb-radius, 0);
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--scrollbar-thumb, #384461));
}

.scrollbar::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb, #5e72a1)));
}

/* Scrollbar utility classes */
.scrollbar-track-transparent {
  --scrollbar-track: transparent;
}

.scrollbar-thumb-neutral-250 {
  --scrollbar-thumb: #afb9d0;
}

.scrollbar-thumb-neutral-700 {
  --scrollbar-thumb-hover: #384461;
}

.scrollbar-thumb-neutral-500 {
  --scrollbar-thumb-active: #5e72a1;
}

.scrollbar-thumb-rounded-full {
  --scrollbar-thumb-radius: 9999px;
  --scrollbar-track-radius: 9999px;
}

/* App-wide Fluent tooltip appearance: white text on a black surface in both themes.
 * Fluent v9 renders the tooltip body as `.fui-Tooltip__content`, and the `withArrow`
 * arrow as its `::before` with `background-color: inherit`, so overriding the body's
 * background recolours the arrow too. `!important` is required because Griffel injects
 * the default atomic styles at runtime (after this bundled stylesheet), so they'd
 * otherwise win on equal specificity. */
.fui-Tooltip__content {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}