/* Selawik — Microsoft's open-source metric-compatible replacement for Segoe UI.
   Source: https://github.com/microsoft/Selawik (SIL OFL 1.1), binaries via
   https://github.com/fontfen/selawik. Segoe UI itself is a licensed system font
   (pre-installed on Windows/Microsoft 365) and cannot be redistributed here, so
   Selawik is the self-hosted fallback for non-Windows preview. On Windows the
   font-stack below always prefers real Segoe UI. */

@font-face {
  font-family: "Selawik";
  src: url("assets/fonts/Selawik-Regular.woff") format("woff"),
       url("assets/fonts/Selawik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Selawik";
  src: url("assets/fonts/Selawik-Bold.woff") format("woff"),
       url("assets/fonts/Selawik-Bold.ttf") format("truetype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* Cascadia Mono — self-hosted from user-uploaded files (replaces the
   previous CDN placeholder for --font-mono). */
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Mono";
  src: url("assets/fonts/CascadiaMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand ramp (Fluent "Communication Blue") ---- */
  --brand-shade-dark:   #004578;
  --brand-shade:        #005A9E;
  --brand-primary:      #0078D4;
  --brand-hover:        #106EBE;
  --brand-tint-10:      #C7E0F4;
  --brand-tint-20:      #DEECF9;
  --brand-tint-30:      #EFF6FC;

  /* ---- Neutral ramp (Fluent Neutral) ---- */
  --neutral-white:      #FFFFFF;
  --neutral-8:          #FAF9F8;
  --neutral-16:         #F3F2F1;
  --neutral-24:         #EDEBE9;
  --neutral-32:         #E1DFDD;
  --neutral-40:         #D2D0CE;
  --neutral-48:         #C8C6C4;
  --neutral-64:         #A19F9D;
  --neutral-80:         #797775;
  --neutral-96:         #605E5C;
  --neutral-112:        #484644;
  --neutral-128:        #323130;
  --neutral-144:        #201F1E;
  --neutral-black:      #000000;

  /* ---- Semantic status (paired with icon/text — never color alone) ---- */
  --status-success:        #107C10;
  --status-success-bg:     #DFF6DD;
  --status-success-border: #9FD89D;
  --status-warning:        #9D5D00;
  --status-warning-bg:     #FFF4CE;
  --status-warning-border: #F2D06B;
  --status-danger:         #B8262A;
  --status-danger-bg:      #FDE7E9;
  --status-danger-border:  #F1A9AC;
  --status-info:           #0078D4;
  --status-info-bg:        #EFF6FC;
  --status-info-border:    #C7E0F4;
  --status-neutral:        #605E5C;
  --status-neutral-bg:     #F3F2F1;
  --status-neutral-border: #D2D0CE;

  /* ---- Semantic aliases: text ---- */
  --text-primary:    var(--neutral-144);
  --text-secondary:  var(--neutral-96);
  --text-tertiary:   var(--neutral-96);
  --text-disabled:   var(--neutral-64);
  --text-on-brand:   var(--neutral-white);
  --text-link:       var(--brand-primary);
  --text-link-hover: var(--brand-shade);

  /* ---- Semantic aliases: surfaces ---- */
  --surface-canvas:    #FAF9FB;   /* page background */
  --surface-primary:   var(--neutral-white); /* cards, panels, table rows */
  --surface-secondary: var(--neutral-16);    /* subtle fills, hover rows */
  --surface-nav:       var(--neutral-white);
  --surface-header:    var(--neutral-white);
  --surface-overlay:   rgba(0, 0, 0, 0.32);
  --surface-disabled:  var(--neutral-24);

  /* ---- Semantic aliases: borders ---- */
  --border-subtle:  var(--neutral-32);
  --border-default: var(--neutral-48);
  --border-strong:  var(--neutral-80);
  --border-focus:   var(--brand-primary);

  /* ---- Interactive states ---- */
  --brand-pressed: var(--brand-shade);
  --row-hover:     var(--neutral-16);
  --row-selected:  var(--brand-tint-30);
}

:root {
  /* ---- Font families ---- */
  --font-sans: "Segoe UI", "Segoe UI Web (West European)", "Selawik",
    -apple-system, BlinkMacSystemFont, "Segoe UI Variable", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace,
    "Roboto Mono", monospace;

  /* ---- Type ramp — deliberately small. Admin-console UI, not marketing type.
     Body copy sits at 13–14px; the single largest size in the whole system
     (page title) is 20px. Nothing in this system should be set larger than
     that without a specific, discussed reason. ---- */
  --font-size-100: 11px;  /* micro / table meta */
  --font-size-200: 12px;  /* caption, helper text, badges */
  --font-size-300: 13px;  /* dense table cells */
  --font-size-400: 14px;  /* body — default UI text */
  --font-size-500: 16px;  /* body-strong / section label */
  --font-size-600: 18px;  /* card / panel title */
  --font-size-700: 20px;  /* page title — the system's ceiling */

  --line-height-100: 14px;
  --line-height-200: 16px;
  --line-height-300: 18px;
  --line-height-400: 20px;
  --line-height-500: 22px;
  --line-height-600: 24px;
  --line-height-700: 28px;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Semantic aliases ---- */
  --text-style-micro:        var(--font-size-100) / var(--line-height-100) var(--font-sans);
  --text-style-caption:      var(--font-size-200) / var(--line-height-200) var(--font-sans);
  --text-style-body-dense:   var(--font-size-300) / var(--line-height-300) var(--font-sans);
  --text-style-body:         var(--font-size-400) / var(--line-height-400) var(--font-sans);
  --text-style-body-strong:  var(--font-weight-semibold) var(--font-size-400) / var(--line-height-400) var(--font-sans);
  --text-style-subtitle:     var(--font-weight-semibold) var(--font-size-500) / var(--line-height-500) var(--font-sans);
  --text-style-panel-title:  var(--font-weight-semibold) var(--font-size-600) / var(--line-height-600) var(--font-sans);
  --text-style-page-title:   var(--font-weight-semibold) var(--font-size-700) / var(--line-height-700) var(--font-sans);
}

:root {
  /* ---- Spacing — 4px base unit, matching the Fluent spacing scale ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;

  /* ---- Fixed chrome dimensions (Admin-Center-style shell) ---- */
  --shell-header-height: 48px;
  --shell-nav-width: 224px;
  --shell-nav-width-collapsed: 48px;
  --shell-content-max-width: 1440px;
  --control-height-sm: 24px;
  --control-height-md: 32px;
  --control-height-lg: 40px;
}

:root {
  /* ---- Corner radius — small and utilitarian, never pill-shaped except
     true toggles/status pills/avatars. ---- */
  --radius-none: 0px;
  --radius-sm: 2px;   /* inputs, buttons, table row hover */
  --radius-md: 4px;   /* cards, menus, dialogs */
  --radius-lg: 8px;   /* large panels, modals */
  --radius-pill: 999px; /* switches, status pills only */

  /* ---- Elevation — Fluent's shadow ramp: two-part (ambient + key), very
     low opacity. Admin-center chrome is mostly flat; shadow only appears on
     things that float above the canvas (menus, dialogs, callouts). ---- */
  --shadow-2:  0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-4:  0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --shadow-8:  0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);

  /* ---- Borders ---- */
  --border-width-thin: 1px;
  --border-width-thick: 2px; /* focus rings, selected states */

  /* ---- Motion — utilitarian, not springy. Fluent uses fast, linear-ish
     eases; nothing bounces in an admin console. ---- */
  --motion-duration-fast: 100ms; /* @kind other */
  --motion-duration-normal: 150ms; /* @kind other */
  --motion-duration-slow: 250ms; /* @kind other */
  --motion-ease-standard: cubic-bezier(0.33, 0, 0.67, 1); /* @kind other */
  --motion-ease-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1); /* @kind other */
  --motion-ease-accelerate: cubic-bezier(0.7, 0, 1, 0.5); /* @kind other */
}

:root {
  color-scheme: light;
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  font: var(--text-style-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

button {
  font: inherit;
}

::selection {
  background: var(--brand-tint-10);
}

/* Fluent-style visible focus ring — never rely on color alone */
:focus-visible {
  outline: var(--border-width-thick) solid var(--border-focus);
  outline-offset: 1px;
}

@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/elevation.css";
@import "tokens/base.css";