@charset "utf-8";

:root {
    color-scheme: light;

    /* Typography */
    --fontFamilyBase: 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --fontSizeBase100: 10px;
    --fontSizeBase200: 12px;
    --fontSizeBase300: 14px;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --lineHeightBase100: 14px;
    --lineHeightBase200: 16px;
    --lineHeightBase300: 20px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --fontWeightRegular: 400;
    --fontWeightSemibold: 600;
    --fontWeightBold: 700;

    /* Spacing */
    --spacingHorizontalXS: 4px;
    --spacingHorizontalS: 8px;
    --spacingHorizontalM: 12px;
    --spacingHorizontalL: 16px;
    --spacingHorizontalXL: 20px;
    --spacingHorizontalXXL: 24px;
    --spacingVerticalXXS: 2px;
    --spacingVerticalXS: 4px;
    --spacingVerticalS: 8px;
    --spacingVerticalM: 12px;
    --spacingVerticalL: 16px;
    --spacingVerticalXL: 20px;
    --spacingVerticalXXL: 24px;
    --spacingVerticalXXXL: 32px;

    /* Radius */
    --borderRadiusNone: 0;
    --borderRadiusSmall: 4px;
    --borderRadiusMedium: 6px;
    --borderRadiusLarge: 8px;
    --borderRadiusXLarge: 12px;
    --borderRadiusCircular: 9999px;
    --r-sm: 4px;
    --r-md: 4px;
    --r-lg: 4px;
    --r-xl: 8px;
    --r-circle: 50%;

    /* Stroke / motion */
    --strokeWidthThin: 1px;
    --strokeWidthThick: 2px;
    --strokeWidthThicker: 3px;
    --durationFast: 120ms;
    --durationNormal: 220ms;
    --curveEasyEase: cubic-bezier(.33, 0, .67, 1);

    /* Layout */
    --sidebar-w: 240px;
    --sidebar-collapsed: 48px;
    --topbar-h: 48px;

    /* Brand - default web blue */
    --brand-80: #0078d4;
    --brand-90: #106ebe;
    --brand-100: #005a9e;
    --brand-bg-tint: #eff6fc;

    /* Accent usage tokens - every state/emphasis reads THESE, never brand-80
       directly for backgrounds, so mode + accent always compose correctly.
       --brand-fg  : accent safe for text/icons on the current surfaces
       --sel-bg/fg : the ONE selection/active treatment
       --hover-bg  : neutral (accent-free) hover wash */
    --brand-fg: var(--brand-80);
    --sel-bg: var(--brand-bg-tint);
    --sel-fg: var(--brand-100);
    --hover-bg: rgba(0, 0, 0, 0.045);

    /* Light neutrals — deliberate elevation steps (Fluent "layering").
       Canvas (nb2) is a clear light-gray floor; raised surfaces — shell,
       cards, fields — are bright white (nb1) so they lift off the page and
       the layout stays easy to scan without relying on borders. */
    --nb1: #ffffff;
    --nb2: #f0f2f5;
    --nb3: #e4e7ec;
    --nb1-hover: #f5f6f8;
    --nb1-pressed: #ebedf0;
    --nf1: #242424;
    --nf2: #424242;
    --nf3: #616161;
    --nf-disabled: #bdbdbd;
    --nf-on-brand: #ffffff;
    --ns1: #c8cdd4;
    --ns2: #e1e4e8;
    --ns3: #eceff3;
    --danger: #c50f1f;
    --danger-hover: #a80000;
    --danger-bg: #fde7e9;
    --danger-fg: #ffffff;

    /* Semantic — success */
    --success: #107c10;
    --success-hover: #0e6e0e;
    --success-bg: #dff6dd;
    --success-fg: #ffffff;

    /* Semantic — warning */
    --warning: #b45309;
    --warning-hover: #92400e;
    --warning-bg: #fef3c7;
    --warning-fg: #ffffff;

    /* Semantic — info */
    --info: #0078d4;
    --info-hover: #106ebe;
    --info-bg: #dbeafe;
    --info-fg: #ffffff;

    /* Overlays / scrims — for modals, tooltips, dropdown shadows */
    --scrim-soft: rgba(0,0,0,0.04);
    --scrim-faint: rgba(0,0,0,0.08);
    --scrim-light: rgba(0,0,0,0.12);
    --scrim-medium: rgba(0,0,0,0.18);
    --scrim-strong: rgba(0,0,0,0.28);
    --scrim-heavy: rgba(0,0,0,0.45);
    --scrim-modal: rgba(0,0,0,0.58);
    --tint-soft: rgba(255,255,255,0.15);
    --tint-medium: rgba(255,255,255,0.28);
    --tint-strong: rgba(255,255,255,0.75);
    --tint-heavy: rgba(255,255,255,0.95);

    /* Shadows */
    --shadow2: 0 1px 2px rgba(0,0,0,0.08);
    --shadow4: 0 2px 4px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.08);
    --shadow8: 0 4px 8px rgba(0,0,0,0.14), 0 0 2px rgba(0,0,0,0.10);
    --shadow16: 0 8px 16px rgba(0,0,0,0.16), 0 0 2px rgba(0,0,0,0.12);

    /* Fluent-style aliases used by Personalize.aspx */
    --colorBrandBackground: var(--brand-80);
    --colorBrandBackgroundHover: var(--brand-90);
    --colorBrandBackgroundPressed: var(--brand-100);
    --colorBrandBackground2: var(--brand-bg-tint);
    --colorBrandForeground1: var(--brand-80);
    --colorBrandStroke1: var(--brand-80);
    --colorBrandShadowAmbient: rgba(0, 120, 212, 0.22);
    --colorStrokeFocus2: #79b8f3;
    --colorStatusDangerBackground3: #d13438;
    --colorStatusSuccessBackground3: #107c10;
    --colorStatusWarningBackground3: #bc4b09;

    --colorNeutralBackground1: var(--nb1);
    --colorNeutralBackground2: var(--nb2);
    --colorNeutralBackground3: var(--nb3);
    --colorNeutralBackgroundAlpha2: rgba(255,255,255,0.88);
    --colorNeutralForeground1: var(--nf1);
    --colorNeutralForeground2: var(--nf2);
    --colorNeutralForeground3: var(--nf3);
    --colorNeutralForegroundDisabled: var(--nf-disabled);
    --colorNeutralForegroundOnBrand: var(--nf-on-brand);
    --colorNeutralStroke1: var(--ns1);
    --colorNeutralStroke2: var(--ns2);
    --colorNeutralStroke3: var(--ns3);
    --colorNeutralCardBackground: var(--nb1);
    --colorNeutralCardBackgroundHover: var(--nb2);
    --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.10);

    /* Shared component surfaces */
    --surface-canvas: var(--nb2);
    --surface-card: var(--nb1);
    --surface-card-subtle: color-mix(in srgb, var(--nb1) 55%, var(--nb2) 45%);
    --surface-card-muted: var(--nb3);
    --surface-toolbar: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    --surface-overlay: rgba(0, 0, 0, 0.36);
    /* Card elevation — lean on shadow + canvas contrast, not heavy borders,
       so cards read as raised panels instead of outlines drawn on paper. */
    --card-shadow: var(--shadow8);
    --card-border: color-mix(in srgb, var(--ns2) 55%, transparent);

    /* Shared field system — fields are a faint inset on white cards (clearly
       distinct from the card surface) with a firm, legible border. */
    --field-bg: color-mix(in srgb, #ffffff 62%, var(--nb2) 38%);
    --field-bg-hover: color-mix(in srgb, #ffffff 50%, var(--nb2) 50%);
    --field-bg-disabled: var(--nb2);
    --field-bg-readonly: var(--nb2);
    --field-border: var(--ns1);
    --field-border-hover: var(--nf3);
    --field-border-focus: var(--brand-80);
    --field-placeholder: var(--nf3);
    --field-focus-ring: transparent;
    --field-inset-highlight: transparent;

    /* Shared button system */
    --btn-primary-bg: var(--brand-80);
    --btn-primary-bg-hover: var(--brand-90);
    --btn-primary-bg-pressed: var(--brand-100);
    --btn-primary-border: var(--brand-80);
    --btn-primary-fg: var(--nf-on-brand);

    --btn-secondary-bg: var(--nb1);
    --btn-secondary-bg-hover: var(--nb1-hover);
    --btn-secondary-bg-pressed: var(--nb1-pressed);
    --btn-secondary-border: var(--ns1);
    --btn-secondary-fg: var(--nf1);

    --btn-danger-bg: #fff1f2;
    --btn-danger-bg-hover: #ffe0e3;
    --btn-danger-bg-pressed: #ffd0d5;
    --btn-danger-border: #f2bcc3;
    --btn-danger-fg: var(--danger);

    /* Login-specific aliases */
    --color-bg1: var(--colorNeutralBackground1);
    --color-bg2: var(--colorNeutralBackground2);
    --color-bg3: var(--colorNeutralBackground3);
    --color-fg1: var(--colorNeutralForeground1);
    --color-fg2: var(--colorNeutralForeground2);
    --color-fg3: var(--colorNeutralForeground3);
    --color-stroke1: var(--colorNeutralStroke1);
    --color-stroke2: var(--colorNeutralStroke2);
    --login-panel-right-bg: #dce9f8;
    --right-dot: rgba(0,80,180,0.06);
    --right-glow: rgba(0,100,220,0.12);
    --right-glow2: rgba(0,60,160,0.07);
    --right-text: #1a3a5c;
    --right-sub: rgba(0,40,100,0.45);
    --right-line: rgba(0,60,180,0.10);
    --right-sep: rgba(0,60,180,0.08);
    --logo-filter: grayscale(1) opacity(0.4);
    --toggle-bg: var(--color-bg2);
}

html[data-theme-mode="dark"] {
    color-scheme: dark;
    /* Dark elevation: page (nb2) is darkest, surfaces (nb1) sit above it,
       nb3 is the hover/elevated layer. Each layer carries a stronger
       accent tint so depth reads clearly. */
    /* WIDE elevation ladder: the canvas is a clearly darker floor, cards
       visibly lift off it, strokes are bright enough to draw real edges -
       so surfaces separate instead of melting together */
    --nb2: #0f1113;
    --nb1: #26282c;
    --nb3: #33363b;
    --nb1-hover: #383b40;
    --nb1-pressed: #43464c;
    --nf1: #ffffff;
    --nf2: #d6d6d6;
    --nf3: #b0b0b0;
    --nf-disabled: #6e6e6e;
    --ns1: #6f7379;
    --ns2: #494d53;
    --ns3: #3b3e44;
    --danger-hover: #e0626a;
    --danger-bg: rgba(209,52,56,0.16);
    --danger-fg: #ffffff;
    --success: #4ade80;
    --success-hover: #22c55e;
    --success-bg: rgba(34,197,94,0.16);
    --success-fg: #062a13;
    --warning: #f59e0b;
    --warning-hover: #d97706;
    --warning-bg: rgba(245,158,11,0.18);
    --warning-fg: #2a1c00;
    --info: #60a5fa;
    --info-hover: #3b82f6;
    --info-bg: rgba(96,165,250,0.18);
    --info-fg: #03204a;
    --scrim-soft: rgba(0,0,0,0.18);
    --scrim-faint: rgba(0,0,0,0.24);
    --scrim-light: rgba(0,0,0,0.32);
    --scrim-medium: rgba(0,0,0,0.42);
    --scrim-strong: rgba(0,0,0,0.55);
    --scrim-heavy: rgba(0,0,0,0.68);
    --scrim-modal: rgba(0,0,0,0.78);
    --tint-soft: rgba(255,255,255,0.06);
    --tint-medium: rgba(255,255,255,0.12);
    --tint-strong: rgba(255,255,255,0.20);
    --tint-heavy: rgba(255,255,255,0.32);
    --colorNeutralBackgroundAlpha2: rgba(24,24,24,0.86);
    --colorNeutralShadowAmbientLighter: rgba(0,0,0,0.18);
    --login-panel-right-bg: #0f0f0f;
    --right-dot: rgba(255,255,255,0.035);
    --right-glow: rgba(0,100,210,0.22);
    --right-glow2: rgba(0,50,140,0.14);
    --right-text: rgba(255,255,255,0.88);
    --right-sub: rgba(255,255,255,0.38);
    --right-line: rgba(255,255,255,0.07);
    --right-sep: rgba(255,255,255,0.06);
    --logo-filter: invert(1) opacity(0.3);
    --toggle-bg: var(--color-bg3);
    --surface-toolbar: linear-gradient(180deg, rgba(29,29,29,0.96) 0%, rgba(23,23,23,0.96) 100%);
    --surface-overlay: rgba(0, 0, 0, 0.56);
    --surface-canvas: var(--nb2);
    --surface-card-subtle: color-mix(in srgb, var(--nb1) 60%, var(--nb3) 40%);
    --card-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 10px 28px rgba(0,0,0,0.45);
    --card-border: var(--ns2);
    --field-bg: color-mix(in srgb, var(--nb2) 55%, var(--nb1) 45%);
    --field-bg-hover: color-mix(in srgb, var(--nb2) 40%, var(--nb1) 60%);
    --field-bg-disabled: var(--nb2);
    --field-bg-readonly: var(--nb2);
    --field-border: var(--ns1);
    --field-border-hover: var(--nf3);
    --field-border-focus: var(--brand-80);
    --field-placeholder: var(--nf3);
    --field-focus-ring: transparent;
    --field-inset-highlight: transparent;
    --btn-danger-bg: rgba(209,52,56,0.16);
    --btn-danger-bg-hover: rgba(209,52,56,0.22);
    --btn-danger-bg-pressed: rgba(209,52,56,0.28);
    --btn-danger-border: rgba(209,52,56,0.34);
    --btn-danger-fg: #ffb3b8;
}

html[data-high-contrast] {
    color-scheme: dark;
    --nb1: #000000;
    --nb2: #000000;
    --nb3: #0c0c0c;
    --nb1-hover: #111111;
    --nb1-pressed: #151515;
    --nf1: #ffffff;
    --nf2: #ffffff;
    --nf3: #f5f5f5;
    --nf-disabled: #9f9f9f;
    --ns1: #ffffff;
    --ns2: #ffffff;
    --ns3: #d0d0d0;
    --danger: #ff5f5f;
    --danger-hover: #ff8a8a;
    --danger-bg: rgba(255,95,95,0.18);
    --danger-fg: #000000;
    --success: #5fff5f;
    --success-hover: #8aff8a;
    --success-bg: rgba(95,255,95,0.18);
    --success-fg: #000000;
    --warning: #ffd700;
    --warning-hover: #ffea66;
    --warning-bg: rgba(255,215,0,0.18);
    --warning-fg: #000000;
    --info: #5ec8ff;
    --info-hover: #87dbff;
    --info-bg: rgba(94,200,255,0.18);
    --info-fg: #000000;
    --scrim-soft: rgba(0,0,0,0.5);
    --scrim-faint: rgba(0,0,0,0.6);
    --scrim-light: rgba(0,0,0,0.7);
    --scrim-medium: rgba(0,0,0,0.8);
    --scrim-strong: rgba(0,0,0,0.88);
    --scrim-heavy: rgba(0,0,0,0.94);
    --scrim-modal: rgba(0,0,0,0.96);
    --tint-soft: rgba(255,255,255,0.18);
    --tint-medium: rgba(255,255,255,0.32);
    --tint-strong: rgba(255,255,255,0.5);
    --tint-heavy: rgba(255,255,255,0.7);
    --colorNeutralBackgroundAlpha2: #000000;
    --colorStrokeFocus2: #ffff00;
    --login-panel-right-bg: #000000;
    --right-dot: rgba(255,255,255,0.09);
    --right-glow: rgba(26,235,255,0.12);
    --right-glow2: rgba(255,255,255,0.06);
    --right-text: #ffffff;
    --right-sub: rgba(255,255,255,0.78);
    --right-line: rgba(255,255,255,0.22);
    --right-sep: rgba(255,255,255,0.18);
    --logo-filter: none;
    --surface-card: #000000;
    --surface-card-subtle: #0c0c0c;
    --surface-card-muted: #111111;
    --surface-toolbar: #000000;
    --surface-overlay: rgba(0, 0, 0, 0.72);
    --field-bg: #000000;
    --field-bg-hover: #000000;
    --field-bg-disabled: #111111;
    --field-bg-readonly: #111111;
    --field-border: #ffffff;
    --field-border-hover: #ffff00;
    --field-border-focus: #ffff00;
    --field-placeholder: #f5f5f5;
    --field-focus-ring: rgba(255,255,0,0.25);
    --field-inset-highlight: rgba(255,255,255,0);
    --btn-secondary-bg: #000000;
    --btn-secondary-bg-hover: #111111;
    --btn-secondary-bg-pressed: #1b1b1b;
    --btn-secondary-border: #ffffff;
    --btn-secondary-fg: #ffffff;
    --btn-danger-bg: #000000;
    --btn-danger-bg-hover: #111111;
    --btn-danger-bg-pressed: #1b1b1b;
    --btn-danger-border: #ff5f5f;
    --btn-danger-fg: #ff5f5f;
}

html[data-accent="blue"] {
    --brand-80: #0078d4;
    --brand-90: #106ebe;
    --brand-100: #005a9e;
    --brand-bg-tint: #eff6fc;
}

html[data-accent="lightGreen"] {
    --brand-80: #0b6700;
    --brand-90: #095700;
    --brand-100: #064500;
    --brand-bg-tint: #e9f5e7;
}

html[data-accent="cranberry"] {
    --brand-80: #6e0925;
    --brand-90: #5f081f;
    --brand-100: #480516;
    --brand-bg-tint: #f9eaee;
}

html[data-accent="navy"] {
    --brand-80: #00396e;
    --brand-90: #002f5b;
    --brand-100: #002345;
    --brand-bg-tint: #e8eef5;
}

html[data-accent="lavender"] {
    --brand-80: #4747a1;
    --brand-90: #3c3c8a;
    --brand-100: #2f2f6c;
    --brand-bg-tint: #efeffb;
}

html[data-accent="steel"] {
    --brand-80: #005b8e;
    --brand-90: #004d79;
    --brand-100: #003b5d;
    --brand-bg-tint: #e8f2f8;
}

html[data-accent="royalBlue"] {
    --brand-80: #3c50b1;
    --brand-90: #33459a;
    --brand-100: #273579;
    --brand-bg-tint: #eef1fb;
}

html[data-accent="darkRed"] {
    --brand-80: #8b1118;
    --brand-90: #761015;
    --brand-100: #590b0f;
    --brand-bg-tint: #faebec;
}

html[data-accent="darkOrange"] {
    --brand-80: #a24c00;
    --brand-90: #8a4100;
    --brand-100: #663000;
    --brand-bg-tint: #fbefe5;
}

html[data-accent="moss"] {
    --brand-80: #567c00;
    --brand-90: #496900;
    --brand-100: #374f00;
    --brand-bg-tint: #f1f6e5;
}

html[data-accent="purple"] {
    --brand-80: #5c2e91;
    --brand-90: #4e277b;
    --brand-100: #3b1d5d;
    --brand-bg-tint: #f3edf9;
}

html[data-accent="magenta"] {
    --brand-80: #8f0f75;
    --brand-90: #7b0d64;
    --brand-100: #5c094b;
    --brand-bg-tint: #faebf7;
}

html[data-accent="plum"] {
    --brand-80: #6b255c;
    --brand-90: #5c1f4f;
    --brand-100: #45173c;
    --brand-bg-tint: #f5edf4;
}

html[data-accent="beige"] {
    --brand-80: #8d5f2f;
    --brand-90: #785126;
    --brand-100: #5d3f1d;
    --brand-bg-tint: #f8f1ea;
}

html[data-accent="marigold"] {
    --brand-80: #d17b00;
    --brand-90: #b86d00;
    --brand-100: #8f5500;
    --brand-bg-tint: #fff3df;
}

html[data-accent="forest"] {
    --brand-80: #0b6a4d;
    --brand-90: #095a42;
    --brand-100: #074331;
    --brand-bg-tint: #e7f4ef;
}

html[data-accent="gold"] {
    --brand-80: #835b00;
    --brand-90: #704d00;
    --brand-100: #543900;
    --brand-bg-tint: #fbf2df;
}

html[data-accent="platinum"] {
    --brand-80: #434e5d;
    --brand-90: #39424f;
    --brand-100: #2b323c;
    --brand-bg-tint: #eef1f4;
}

html[data-accent="red"] {
    --brand-80: #b10e1c;
    --brand-90: #990c18;
    --brand-100: #730911;
    --brand-bg-tint: #fdebec;
}

html[data-accent="pink"] {
    --brand-80: #bf0077;
    --brand-90: #a50067;
    --brand-100: #7d004e;
    --brand-bg-tint: #fde7f4;
}

html[data-accent="neutral"] {
    --brand-80: #444241;
    --brand-90: #3a3837;
    --brand-100: #2c2a29;
    --brand-bg-tint: #f1efee;
}

html,
body {
    font-family: var(--fontFamilyBase);
    background: var(--nb2);
    color: var(--nf1);
}

/* ═══════════════════════════════════════════════════════════════════
   MODE-AWARE ACCENT DERIVATIONS
   Placed after the accent palette on purpose: the per-accent blocks
   define light-mode values; these recompute the accent-dependent
   tokens for dark and high-contrast so ANY accent stays readable and
   the hierarchy survives every mode x accent combination.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme-mode="dark"] {
    /* dark accents (e.g. navy, plum) are too dark for text on dark
       surfaces - lift them; tints are computed, never hard-coded */
    --brand-fg: color-mix(in srgb, var(--brand-80) 55%, #ffffff);
    --brand-bg-tint: color-mix(in srgb, var(--brand-80) 22%, var(--nb1));
    --sel-bg: color-mix(in srgb, var(--brand-80) 26%, var(--nb1));
    --sel-fg: var(--brand-fg);
    --hover-bg: rgba(255, 255, 255, 0.06);
}

html[data-high-contrast] {
    /* HC is an accessibility mode, not a theme: one fixed, maximally
       legible accent regardless of the chosen accent color; selection
       is solid inverse, hovers are plain steps, all shadows die. */
    --brand-80: #4cc2ff;
    --brand-90: #6fd0ff;
    --brand-100: #9edcff;
    --brand-fg: #4cc2ff;
    --brand-bg-tint: #002b40;
    --sel-bg: #4cc2ff;
    --sel-fg: #000000;
    --hover-bg: #1a1a1a;
    --nf-on-brand: #000000;
    --shadow2: none;
    --shadow4: none;
    --shadow8: none;
    --shadow16: none;
    --card-shadow: none;
    --card-border: #ffffff;
    --btn-primary-bg: #4cc2ff;
    --btn-primary-bg-hover: #6fd0ff;
    --btn-primary-bg-pressed: #9edcff;
    --btn-primary-border: #ffffff;
    --btn-primary-fg: #000000;
}