/*
  Base CSS for Phase E
  - Token-only values
  - No page/component/layout styling
  - Source of truth: lms_md/design_tokens.md
*/

@font-face {
  font-family: "KhalidArt";
  src: url("/stem/assist/KhalidArtBoldRegular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  text-size-adjust: none;
  --palette-grey-900: #2F3034;
  --palette-grey-800: #45474D;
  --palette-grey-50: #E6EAF0;
  --palette-grey-0: #FFFFFF;
  --palette-grey-1000: #212226;
  --palette-grey-20: #EFF2F7;
  --palette-grey-1200: #121317;
  --palette-grey-1100: #18191D;
  --palette-grey-10: #F8F9FC;
  --palette-grey-100: #E1E6EC;
  --palette-grey-200: #CDD4DC;
  --palette-grey-300: #B2BBC5;
  --palette-grey-400: #B7BFD9;
  --palette-grey-600: #AAB1CC4D;
  --palette-grey-1000-12: #dedfe2;
  --palette-grey-50-20: #414347;
  --palette-grey-15: #F0F1F5;
  --palette-grey-0-rgb: 255, 255, 255;
  --palette-grey-50-rgb: 230, 234, 240;
  --palette-grey-400-rgb: 183, 191, 217;
  --palette-grey-600-rgb: 170, 177, 204;
  --palette-grey-1000-rgb: 33, 34, 38;
  --palette-grey-1200-rgb: 18, 19, 23;

  --theme-surface-surface: var(--palette-grey-0);
  --theme-surface-on-surface: var(--palette-grey-1200);
  --theme-surface-on-surface-variant: var(--palette-grey-800);
  --theme-surface-surface-container: var(--palette-grey-10);
  --theme-surface-surface-container-high: var(--palette-grey-20);
  --theme-surface-surface-container-higher: var(--palette-grey-50);
  --theme-surface-surface-container-highest: var(--palette-grey-100);

  --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
  --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
  --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
  --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
  --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);

  --theme-outline-outline-variant: rgba(33, 34, 38, .06);

  /* Color tokens */
  --glass-bg: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.08);

  --accent-primary: #3B6EA8;
  --accent-primary-rgb: 59, 110, 168;
  --accent-success: #2F7D5C;
  --accent-success-rgb: 47, 125, 92;
  --accent-warning: #B07A2A;

  --text-primary: #1a1a1a;
  --text-secondary: #666666;

  /* Blur tokens */
  --blur-sm: 6px;
  --blur-md: 12px;
  --blur-lg: 20px;

  /* Radius tokens */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Spacing tokens */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Typography tokens */
  --font-family-primary: "KhalidArt";
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --line-height-sm: 1.25;
  --line-height-md: 1.5;
  --line-height-lg: 1.75;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

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

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

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--theme-surface-on-surface);
  min-height: 100svh;
  box-sizing: border-box;
  background: var(--theme-surface-surface-container);
}

/* Base elements */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--spacing-md) 0;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-sm);
}

h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
h4 { font-size: var(--font-size-sm); }
h5 { font-size: var(--font-size-xs); }
h6 { font-size: var(--font-size-xs); }

p {
  margin: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}

ul,
ol {
  margin: 0 0 var(--spacing-md) 0;
  padding-inline-start: var(--spacing-lg);
}

li {
  margin: 0 0 var(--spacing-sm) 0;
}

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

a:hover,
a:focus {
  text-decoration: underline;
}