/* AICoE Design System — generated. Do not edit; source is tokens/tokens.json. */
/* system 2.8.0 · Extracted verbatim (hex-for-hex) from aicoe-intranet templates/base.html :root (commit 8e914c7). This file is the single source of truth; tokens.css/tokens.js are generated, never hand-edited. */
:root {
  /* ink ramp  Text & neutrals — teal-tinted slate. No black. */
  --ink-050: #F3F7F6;
  --ink-100: #E7EFED;
  --ink-150: #DCE5E2;
  --ink-200: #C9D6D2;
  --ink-300: #A7B7B3;
  --ink-500: #6E807B;
  --ink-600: #5B6D68;
  --ink-800: #3E504B;
  --ink-900: #2D3E39;
  --card: #FBFDFD;

  /* teal ramp Brand anchor  */
  --teal-50: #F0FDF9;
  --teal-100: #D2F4E5;
  --teal-200: #B2F5E4;
  --teal-300: #7BEBD2;
  --teal-400: #4FE1BC;
  --teal-500: #2DD4AC;
  --teal-600: #22B592;
  --teal-700: #0E9F7E;
  --teal-800: #0C8268;
  --teal-900: #09624E;

  /* red ramp Danger  */
  --red-50: #FDEFEF;
  --red-100: #FBDCDC;
  --red-300: #F09494;
  --red-500: #E63030;
  --red-600: #C72626;
  --red-700: #A31F1F;
  --red-900: #581111;

  /* amber ramp Warning  */
  --amber-50: #FDF7E7;
  --amber-100: #FBEDC8;
  --amber-300: #EFC856;
  --amber-500: #D4A017;
  --amber-700: #89670D;
  --amber-900: #423006;

  /* azure ramp Info  */
  --azure-50: #EFF6FA;
  --azure-100: #D9EAF2;
  --azure-300: #85BFD7;
  --azure-500: #3389AF;
  --azure-700: #1E5873;
  --azure-900: #0D2B38;

  /* coral ramp Presentation accent — teal's complement  */
  --coral-50: #FEF3F0;
  --coral-100: #FCE4DD;
  --coral-300: #F5A78F;
  --coral-500: #E8734F;
  --coral-600: #D25B37;
  --coral-700: #A83D1E;
  --coral-900: #521A08;

  /* rose ramp Presentation accent  */
  --rose-50: #FDF2F7;
  --rose-100: #FBE2EC;
  --rose-300: #F49BC0;
  --rose-500: #DB5C96;
  --rose-600: #C2447E;
  --rose-700: #97275C;
  --rose-900: #4A0E2A;

  /* violet ramp Avatars only — never a state  */
  --violet-50: #F7F4FE;
  --violet-100: #ECE7FD;
  --violet-200: #DDD3FB;
  --violet-300: #C4B4F8;
  --violet-500: #8B5CF6;
  --violet-700: #6D28D9;
  --violet-900: #2E1065;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(45,62,57,.05);
  --shadow-md: 0 1px 2px rgba(45,62,57,.04), 0 8px 24px rgba(45,62,57,.06);
  --shadow-lg: 0 2px 4px rgba(45,62,57,.04), 0 16px 48px rgba(45,62,57,.10);

  /* Motion */
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --ease-out: cubic-bezier(.2,.7,.3,1);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 13.5px;
  --text-body: 14px;
  --text-lg: 16px;
  --text-xl: 21px;
  --text-2xl: 34px;
  --text-label: 13px;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Layout */
  --tabbar-h: 62px;
  --topbar-h: 60px;
  --content-max: 1200px;
  --content-narrow: 760px;
  --sidebar-w: 264px;
  --drawer-w: 480px;
  --drawer-wide: 640px;
  --modal-sm: 420px;
  --modal-md: 560px;
  --modal-lg: 720px;

  /* Overlay */
  --overlay-blur: 14px;
  --overlay-saturate: 1.4;
  --overlay-radius: 22px;

  /* Stacking */
  --z-rail: 30;
  --z-sticky: 40;
  --z-nav: 50;
  --z-toast: 60;
}

/* Semantic roles — light (default) */
:root {
  --bg: #F3F7F6;
  --surface: #FBFDFD;
  --surfaceHover: #FFFFFF;
  --text: #2D3E39;
  --textSecondary: #5B6D68;
  --textMuted: #5B6D68;
  --textDisabled: #A7B7B3;
  --border: #DCE5E2;
  --borderStrong: #C9D6D2;
  --scrim: rgba(45,62,57,.45);
  --focus: #7BEBD2;
  --accent: #2DD4AC;
  --accentStrong: #0E9F7E;
  --onAccent: #2D3E39;
  --success: #0E9F7E;
  --danger: #A31F1F;
  --warning: #89670D;
  --info: #1E5873;
  --linkText: #0C8268;
  --chart1: #0C8268;
  --chart2: #1E5873;
  --chart3: #89670D;
  --chart4: #97275C;
  --chart5: #A83D1E;
  --chart6: #3E504B;
}

/* Semantic roles — dark (auto via OS, or explicit [data-theme=dark]) */
/* The OS media query applies only when the user hasn't set an explicit theme. */
/* so an explicit [data-theme=light|dark] choice always wins over the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
      --bg: #16221E;
      --surface: #1E2B26;
      --surfaceHover: #26332E;
      --text: #EDF5F2;
      --textSecondary: #C9D6D2;
      --textMuted: #8FA09B;
      --textDisabled: #5B6D68;
      --border: #33443E;
      --borderStrong: #42564E;
      --focus: #7BEBD2;
      --accent: #2DD4AC;
      --accentStrong: #4FE1BC;
      --onAccent: #12201A;
      --success: #7BEBD2;
      --danger: #F09494;
      --warning: #EFC856;
      --info: #85BFD7;
      --scrim: rgba(8,14,12,.60);
      --linkText: #7BEBD2;
      --chart1: #7BEBD2;
      --chart2: #85BFD7;
      --chart3: #EFC856;
      --chart4: #F49BC0;
      --chart5: #F5A78F;
      --chart6: #C9D6D2;
      --ink-900: #EDF5F2;
      --ink-800: #D3DFDB;
      --ink-600: #C9D6D2;
      --ink-500: #8FA09A;
      --ink-300: #5B6D68;
      --ink-200: #42564E;
      --ink-150: #33443E;
      --ink-100: #26332E;
      --ink-050: #16221E;
      --card: #1E2B26;
  }
}
:root[data-theme='dark'], [data-theme-scope='dark'] {
  color-scheme: dark;
    --bg: #16221E;
    --surface: #1E2B26;
    --surfaceHover: #26332E;
    --text: #EDF5F2;
    --textSecondary: #C9D6D2;
    --textMuted: #8FA09B;
    --textDisabled: #5B6D68;
    --border: #33443E;
    --borderStrong: #42564E;
    --focus: #7BEBD2;
    --accent: #2DD4AC;
    --accentStrong: #4FE1BC;
    --onAccent: #12201A;
    --success: #7BEBD2;
    --danger: #F09494;
    --warning: #EFC856;
    --info: #85BFD7;
    --scrim: rgba(8,14,12,.60);
    --linkText: #7BEBD2;
    --chart1: #7BEBD2;
    --chart2: #85BFD7;
    --chart3: #EFC856;
    --chart4: #F49BC0;
    --chart5: #F5A78F;
    --chart6: #C9D6D2;
    --ink-900: #EDF5F2;
    --ink-800: #D3DFDB;
    --ink-600: #C9D6D2;
    --ink-500: #8FA09A;
    --ink-300: #5B6D68;
    --ink-200: #42564E;
    --ink-150: #33443E;
    --ink-100: #26332E;
    --ink-050: #16221E;
    --card: #1E2B26;
}
:root[data-theme='light'], [data-theme-scope='light'] { color-scheme: light;
  --bg: #F3F7F6;
  --surface: #FBFDFD;
  --surfaceHover: #FFFFFF;
  --text: #2D3E39;
  --textSecondary: #5B6D68;
  --textMuted: #5B6D68;
  --textDisabled: #A7B7B3;
  --border: #DCE5E2;
  --borderStrong: #C9D6D2;
  --scrim: rgba(45,62,57,.45);
  --focus: #7BEBD2;
  --accent: #2DD4AC;
  --accentStrong: #0E9F7E;
  --onAccent: #2D3E39;
  --success: #0E9F7E;
  --danger: #A31F1F;
  --warning: #89670D;
  --info: #1E5873;
  --linkText: #0C8268;
  --chart1: #0C8268;
  --chart2: #1E5873;
  --chart3: #89670D;
  --chart4: #97275C;
  --chart5: #A83D1E;
  --chart6: #3E504B;
  --ink-050: #F3F7F6;
  --ink-100: #E7EFED;
  --ink-150: #DCE5E2;
  --ink-200: #C9D6D2;
  --ink-300: #A7B7B3;
  --ink-500: #6E807B;
  --ink-600: #5B6D68;
  --ink-800: #3E504B;
  --ink-900: #2D3E39;
  --card: #FBFDFD;
}
/* light default: tell the UA our palette is light (avoids dark form controls on a light page) */