/* ==========================================================================
   360Learning Design System — Tokens
   Copied verbatim from the design-system project (colors_and_type.css),
   trimmed to the font weights actually shipped in assets/fonts/
   (400, 400-italic, 500, 600, 700 — the type scale below never needs more).
   ========================================================================== */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ========================================================================
     PRIMITIVE TOKENS  —  raw palette, do not reference directly in product UI
     ======================================================================== */

  /* Brand (blue ramp) — 360Learning's core brand palette */
  --brand-100: #E3EBFD;
  --brand-200: #C5D7FC;
  --brand-300: #1E5CFF;
  --brand-400: #124FE8;
  --brand-500: #0B48DA;
  --brand-600: #0A47C2;   /* PRIMARY */
  --brand-700: #08399B;
  --brand-800: #0A2872;

  /* Grey ramp */
  --grey-0:   #FFFFFF;
  --grey-50:  #F7F7F9;
  --grey-100: #F1F1F3;
  --grey-200: #E3E4E8;
  --grey-300: #C7C9D1;
  --grey-400: #ABAEBA;
  --grey-500: #8F93A3;
  --grey-600: #70748A;
  --grey-700: #5C6070;
  --grey-800: #454854;
  --grey-850: #2E3038;
  --grey-900: #18191D;

  /* Red ramp */
  --red-100: #FBE0DE; --red-200: #F6B5B0; --red-300: #EE8A83;
  --red-400: #E56A60; --red-500: #D9332A; --red-600: #B81414;
  --red-700: #7E0A0A; --red-800: #3E0505;

  /* Yellow ramp */
  --yellow-100: #FBEFD0; --yellow-200: #F7D98A; --yellow-300: #F2C45B;
  --yellow-400: #EDB325; --yellow-500: #D69B0F; --yellow-600: #A07607;
  --yellow-700: #6B4F05; --yellow-800: #342701;

  /* Green ramp */
  --green-100: #DCEEE2; --green-200: #AED7B8; --green-300: #7CBB8E;
  --green-400: #4FA373; --green-500: #26834D; --green-600: #166639;
  --green-700: #0D4626; --green-800: #062515;

  /* Purple ramp */
  --purple-100: #E9DDF5; --purple-200: #C8A9E8; --purple-300: #A576D6;
  --purple-400: #824DC2; --purple-500: #5E2BA7; --purple-600: #421780;
  --purple-700: #280B55; --purple-800: #110425;

  /* Black / White alpha — use on imagery, overlays, scrims */
  --black-80: rgba(0,0,0,0.80); --black-64: rgba(0,0,0,0.64);
  --black-40: rgba(0,0,0,0.40); --black-24: rgba(0,0,0,0.24);
  --black-12: rgba(0,0,0,0.12);
  --white-80: rgba(255,255,255,0.80); --white-64: rgba(255,255,255,0.64);
  --white-40: rgba(255,255,255,0.40); --white-24: rgba(255,255,255,0.24);
  --white-12: rgba(255,255,255,0.12); --white-0:  rgba(255,255,255,0);

  /* ========================================================================
     SEMANTIC TOKENS  —  use these in product code
     ======================================================================== */

  /* Foreground / text */
  --fg-default:   var(--grey-900);
  --fg-subtle:    var(--grey-800);
  --fg-muted:     var(--grey-600);
  --fg-disabled:  var(--grey-400);
  --fg-inverse:   var(--grey-0);
  --fg-brand:     var(--brand-600);
  --fg-success:   var(--green-600);
  --fg-warning:   var(--yellow-700);
  --fg-critical:  var(--red-600);
  --fg-link:      var(--brand-600);

  /* Background / surface */
  --bg-canvas:          var(--grey-50);
  --bg-surface:         var(--grey-0);
  --bg-subtle:          var(--grey-100);
  --bg-inverse:         var(--grey-900);
  --bg-brand:           var(--brand-600);
  --bg-brand-subtle:    var(--brand-100);
  --bg-success-subtle:  var(--green-100);
  --bg-warning-subtle:  var(--yellow-100);
  --bg-critical-subtle: var(--red-100);
  --bg-beta-subtle:     var(--purple-100);
  --fg-beta:            #5B18B4;

  /* AI gradient — the signature of the roleplay feature */
  --ai-gradient: linear-gradient(90deg, #0C52DF, #8F4BE7);
  --ai-gradient-subtle: linear-gradient(135deg, var(--brand-100), var(--purple-100));

  /* Border */
  --border-default: var(--grey-300);
  --border-subtle:  var(--grey-200);
  --border-strong:  var(--grey-850);
  --border-brand:   var(--brand-600);
  --border-critical:var(--red-600);

  /* ========================================================================
     SPACING  — 0, 4, 8, 12, 16, 24, 32, 40, 80
     ======================================================================== */
  --spacing-none: 0;
  --spacing-xxs:  4px;
  --spacing-xs:   8px;
  --spacing-s:    12px;
  --spacing-m:    16px;
  --spacing-l:    24px;
  --spacing-xl:   32px;
  --spacing-xxl:  40px;
  --spacing-xxxl: 80px;

  /* ========================================================================
     RADIUS  — 4 (small), 8 (default), 16 (large), 999 (pill)
     ======================================================================== */
  --radius-small:   4px;
  --radius-default: 8px;
  --radius-large:   16px;
  --radius-pill:    999px;

  /* ========================================================================
     SHADOWS
     ======================================================================== */
  --shadow-default: 0 4px 8px 0 rgba(0, 0, 0, 0.24);
  --shadow-focus:   0 0 0 3px rgba(10, 71, 194, 0.24);

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale (Web) */
  --fs-headline:   24px; --lh-headline:   32px; --fw-headline:   600;
  --fs-title-lg:   20px; --lh-title-lg:   28px; --fw-title-lg:   600;
  --fs-title-md:   18px; --lh-title-md:   24px; --fw-title-md:   600;
  --fs-title-sm:   16px; --lh-title-sm:   22px; --fw-title-sm:   600;
  --fs-label:      14px; --lh-label:      20px; --fw-label:      600;
  --fs-body:       14px; --lh-body:       20px; --fw-body:       400;
  --fs-body-bold:  14px; --lh-body-bold:  20px; --fw-body-bold:  600;
  --fs-caption:    13px; --lh-caption:    19px; --fw-caption:    400;
  --fs-caption-b:  13px; --lh-caption-b:  19px; --fw-caption-b:  600;
  --fs-disclaimer: 12px; --lh-disclaimer: 19px; --fw-disclaimer: 400;
}

/* ========================================================================
   Semantic typography classes  — map 1:1 onto the Figma type scale
   ======================================================================== */
html, body { font-family: var(--font-ui); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-ui); }
.headline,  h2 { font-weight: var(--fw-headline); font-size: var(--fs-headline); line-height: var(--lh-headline); }
.title-lg,  h3 { font-weight: var(--fw-title-lg); font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); }
.title-md,  h4 { font-weight: var(--fw-title-md); font-size: var(--fs-title-md); line-height: var(--lh-title-md); }
.title-sm,  h5 { font-weight: var(--fw-title-sm); font-size: var(--fs-title-sm); line-height: var(--lh-title-sm); }

.label       { font: var(--fw-label)     var(--fs-label)/var(--lh-label)         var(--font-ui); color: var(--fg-default); }
.body-bold   { font: var(--fw-body-bold) var(--fs-body-bold)/var(--lh-body-bold) var(--font-ui); color: var(--fg-default); }
.body        { font: var(--fw-body)      var(--fs-body)/var(--lh-body)           var(--font-ui); color: var(--fg-subtle); }
.caption-bold{ font: var(--fw-caption-b) var(--fs-caption-b)/var(--lh-caption-b) var(--font-ui); color: var(--fg-subtle); }
.caption     { font: var(--fw-caption)   var(--fs-caption)/var(--lh-caption)     var(--font-ui); color: var(--fg-muted); }
.disclaimer  { font: var(--fw-disclaimer)var(--fs-disclaimer)/var(--lh-disclaimer) var(--font-ui); color: var(--fg-muted); }

a { color: var(--fg-link); text-decoration: none; font-weight: 600; }
a:hover { color: var(--brand-700); text-decoration: underline; }

* { box-sizing: border-box; }
body { margin: 0; }
input, textarea, button, select { font-family: inherit; font-size: 14px; }
textarea { resize: none; }
::placeholder { color: var(--grey-500); }