/* ============================================================
   Fluent UI Blazor Design System - Foundations (IGM)
   Source: src/Artifacts/Fluent UI Blazor Design System/colors_and_type.css
   Adaptive tokens drawn from FAST/Fluent design system.
   NOTE: element-level styles (h1-h6, a, code, blockquote...) from the
   original file are intentionally omitted here to avoid fighting the
   project's existing main.css element/utility rules. This file ships
   ONLY tokens + @font-face. Recoloring of existing markup is done by
   igm-theme-bridge.css (re-maps project token names onto these).
   ============================================================ */

/* ---------- Brand typeface: Onest ----------
   Reuses the font files already present in the project at
   /assets/fonts/Onest/ (paths corrected; the legacy Onest.css had
   broken relative urls and was never linked). No SemiBold file exists,
   so weight 600 maps to Onest Medium (matches the project's prior choice). */
@font-face { font-family:"Onest"; font-style:normal; font-weight:100; font-display:swap; src:url("assets/fonts/Onest/OnestThin1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestThin1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:200; font-display:swap; src:url("assets/fonts/Onest/OnestThin1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestThin1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:300; font-display:swap; src:url("assets/fonts/Onest/OnestLight1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestLight1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:400; font-display:swap; src:url("assets/fonts/Onest/OnestRegular1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestRegular1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:500; font-display:swap; src:url("assets/fonts/Onest/OnestMedium1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestMedium1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/fonts/Onest/OnestMedium1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestMedium1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/Onest/OnestBold1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestBold1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:800; font-display:swap; src:url("assets/fonts/Onest/OnestExtraBold1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestExtraBold1602-hint.ttf") format("truetype"); }
@font-face { font-family:"Onest"; font-style:normal; font-weight:900; font-display:swap; src:url("assets/fonts/Onest/OnestBlack1602-hint.woff") format("woff"), url("assets/fonts/Onest/OnestBlack1602-hint.ttf") format("truetype"); }

/* ---------- Typography stack ---------- */
:root {
  --body-font: "Segoe UI", "Onest", "Segoe UI Variable",  -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --monospace-font: "Cascadia Code", "Consolas", ui-monospace, "SFMono-Regular",
                    "Menlo", "Monaco", monospace;
}

/* ---------- Light theme (default) -------------------------------------- */
:root,
.theme-light {
  /* Brand / accent - IGM shield blue (sampled from the crest). */
  --accent-base-color: #386ba5;
  --accent-fill-rest: #386ba5;
  --accent-fill-hover: #2f5b8e;
  --accent-fill-active: #245074;
  --accent-fill-focus: #386ba5;
  --accent-foreground-rest: #2f5b8e;
  --accent-foreground-hover: #245074;
  --accent-stroke-control-rest: #386ba5;
  --accent-stroke-control-active: #d0deed;
  --foreground-on-accent-rest: #ffffff;

  /* Secondary brand - heraldic gold. Use sparingly. */
  --brand-gold:        #f5b91a;
  --brand-gold-soft:   #fff4cf;
  --brand-gold-strong: #c79100;

  /* Neutral palette - light mode layers (Layer 1 = lightest) */
  --neutral-layer-floating: #ffffff;
  --neutral-layer-1: #ffffff;
  --neutral-layer-2: #fafafa;
  --neutral-layer-3: #f5f5f5;
  --neutral-layer-4: #f0f0f0;
  --neutral-layer-card-container: #f0f0f0;

  /* Foreground (text/icon) on neutral surfaces */
  --neutral-foreground-rest: #242424;
  --neutral-foreground-hover: #1a1a1a;
  --neutral-foreground-active: #000000;
  --neutral-foreground-hint: #616161;
  --neutral-foreground-disabled: #bdbdbd;
  --neutral-fill-inverse-rest: #ffffff;

  /* Neutral fills (buttons, chips, hovers) */
  --neutral-fill-rest: #f5f5f5;
  --neutral-fill-hover: #ebebeb;
  --neutral-fill-active: #e0e0e0;
  --neutral-fill-secondary-rest: #fafafa;
  --neutral-fill-stealth-rest: transparent;
  --neutral-fill-stealth-hover: #f0f0f0;
  --neutral-fill-stealth-active: #e8e8e8;
  --neutral-fill-input-rest: #ffffff;
  --neutral-stroke-layer-rest: #f5f5f5;

  /* Strokes / dividers */
  --neutral-stroke-rest: #d1d1d1;
  --neutral-stroke-hover: #c7c7c7;
  --neutral-stroke-active: #b3b3b3;
  --neutral-stroke-focus: #707070;
  --neutral-stroke-divider-rest: #e0e0e0;
  --neutral-stroke-strong-rest: #707070;

  /* Status / semantic */
  --info:    #0078d4;
  --success: #107c10;
  --warning: #f7630c;
  --error:   #c50f1f;
  --status-info-bg:    #f3f9fd;
  --status-success-bg: #dff6dd;
  --status-warning-bg: #fff4ce;
  --status-error-bg:   #fde7e9;
}

/* ---------- Dark theme -------------------------------------------------
   Activates on the design-system .theme-dark class AND on the project's
   existing [data-theme="dark"] switch (SiteSettingsPanel). */
.theme-dark,
[data-theme="dark"] {
  --accent-base-color: #2899f5;
  --accent-fill-rest: #2899f5;
  --accent-fill-hover: #62abf5;
  --accent-fill-active: #76b9f5;
  --accent-foreground-rest: #62abf5;
  --accent-foreground-hover: #76b9f5;
  --foreground-on-accent-rest: #ffffff;

  --neutral-layer-floating: #2b2b2b;
  --neutral-layer-1: #272727;
  --neutral-layer-2: #1f1f1f;
  --neutral-layer-3: #1a1a1a;
  --neutral-layer-4: #141414;
  --neutral-layer-card-container: #1f1f1f;

  --neutral-foreground-rest: #ffffff;
  --neutral-foreground-hover: #f5f5f5;
  --neutral-foreground-hint: #a6a6a6;
  --neutral-foreground-disabled: #5c5c5c;
  --neutral-fill-inverse-rest: #242424;

  --neutral-fill-rest: #3d3d3d;
  --neutral-fill-hover: #4a4a4a;
  --neutral-fill-active: #545454;
  --neutral-fill-secondary-rest: #333333;
  --neutral-fill-stealth-rest: transparent;
  --neutral-fill-stealth-hover: #333333;
  --neutral-fill-input-rest: #1f1f1f;
  --neutral-stroke-layer-rest: #2e2e2e;

  --neutral-stroke-rest: #545454;
  --neutral-stroke-divider-rest: #404040;
  --neutral-stroke-strong-rest: #a6a6a6;
}

/* ============================================================
   TYPE RAMP - Fluent's "type-ramp-minus-2 -> plus-6"
   ============================================================ */
:root {
  --type-ramp-minus-2-font-size: 10px;   --type-ramp-minus-2-line-height: 14px;
  --type-ramp-minus-1-font-size: 12px;   --type-ramp-minus-1-line-height: 16px;
  --type-ramp-base-font-size:    14px;   --type-ramp-base-line-height:    20px;
  --type-ramp-plus-1-font-size:  16px;   --type-ramp-plus-1-line-height:  22px;
  --type-ramp-plus-2-font-size:  20px;   --type-ramp-plus-2-line-height:  26px;
  --type-ramp-plus-3-font-size:  24px;   --type-ramp-plus-3-line-height:  32px;
  --type-ramp-plus-4-font-size:  28px;   --type-ramp-plus-4-line-height:  36px;
  --type-ramp-plus-5-font-size:  32px;   --type-ramp-plus-5-line-height:  40px;
  --type-ramp-plus-6-font-size:  40px;   --type-ramp-plus-6-line-height:  52px;

  /* Weights */
  --font-weight: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing & sizing tokens */
  --design-unit: 4;
  --base-height-multiplier: 10;
  --base-horizontal-spacing-multiplier: 3;
  --control-corner-radius: 4px;
  --layer-corner-radius: 4px;
  --stroke-width: 1px;
  --focus-stroke-width: 2px;
  --disabled-opacity: 0.3;

  /* Shadow tokens - Fluent 2 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,.20);
  --shadow-64: 0 0 8px rgba(0,0,0,.20), 0 32px 64px rgba(0,0,0,.24);
}

/* ============================================================
   OFFICE COLOR PALETTE - for app accent variations
   ============================================================ */
:root {
  --color-office-default:    #036ac4;
  --color-office-word:       #185abd;
  --color-office-excel:      #107c41;
  --color-office-powerpoint: #c43e1c;
  --color-office-outlook:    #0078d4;
  --color-office-onenote:    #7719aa;
  --color-office-teams:      #6264a7;
  --color-office-sharepoint: #03787c;
  --color-office-yammer:     #106ebe;
  --color-office-visio:      #3955a3;
  --color-office-access:     #a4373a;
  --color-office-project:    #31752f;
  --color-office-publisher:  #077568;
  --color-office-stream:     #bc1948;
}