/* ============================================================
   Paragon Design System — Color + Type Tokens
   Source: openedx/paragon scss/core/_variables.scss + Figma Foundations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Brand ---------- */
  --pgn-primary:    #0A3055;   /* Primary — deep navy */
  --pgn-brand:      #9D0054;   /* Brand — magenta/plum */
  --pgn-accent-a:   #00BBF9;   /* Accent A — cyan */
  --pgn-accent-b:   #FFEE88;   /* Accent B — soft yellow */
  --pgn-dark:       #273F2F;   /* Dark — deep green */
  --pgn-light:      #E1DDDB;   /* Light — warm taupe */

  /* ---------- Neutrals (grays) ---------- */
  --pgn-white:    #FFFFFF;
  --pgn-gray-100: #EBEBEB;
  --pgn-gray-200: #CCCCCC;
  --pgn-gray-300: #ADADAD;
  --pgn-gray-400: #8F8F8F;
  --pgn-gray-500: #707070;
  --pgn-gray-600: #5C5C5C;
  --pgn-gray-700: #454545;
  --pgn-gray-800: #333333;
  --pgn-gray-900: #212529;
  --pgn-black:    #000000;

  /* ---------- Primary scale (#0A3055) ---------- */
  --pgn-primary-100: #E7EAEE;
  --pgn-primary-200: #C2CBD5;
  --pgn-primary-300: #8598AA;
  --pgn-primary-400: #476580;
  --pgn-primary-500: #0A3055;
  --pgn-primary-600: #092B4D;
  --pgn-primary-700: #082644;
  --pgn-primary-800: #072440;
  --pgn-primary-900: #07223C;

  /* ---------- Brand scale (#9D0054) ---------- */
  --pgn-brand-100: #F5E6EE;
  --pgn-brand-200: #E7BFD4;
  --pgn-brand-300: #CE80AA;
  --pgn-brand-400: #B6407F;
  --pgn-brand-500: #9D0054;
  --pgn-brand-600: #8D004C;
  --pgn-brand-700: #7E0043;
  --pgn-brand-800: #76003F;
  --pgn-brand-900: #6E003B;

  /* ---------- Info / Teal (#006DAA) ---------- */
  --pgn-info-100:  #E6F0F7;
  --pgn-info-200:  #BFD6E9;
  --pgn-info-300:  #80B5D4;
  --pgn-info-400:  #408DBF;
  --pgn-info-500:  #006DAA;
  --pgn-info-600:  #006299;
  --pgn-info-700:  #005688;
  --pgn-info-800:  #005280;
  --pgn-info-900:  #004C77;

  /* ---------- Success / Green (#178253) ---------- */
  --pgn-success-100: #E8F2ED;
  --pgn-success-200: #C5DACF;
  --pgn-success-300: #8BB5A9;
  --pgn-success-400: #519183;
  --pgn-success-500: #178253;
  --pgn-success-600: #14754B;
  --pgn-success-700: #126842;
  --pgn-success-800: #11623E;
  --pgn-success-900: #105B3A;

  /* ---------- Danger / Red (#C32D3A) ---------- */
  --pgn-danger-100:  #F9E9EB;
  --pgn-danger-200:  #EDC3C7;
  --pgn-danger-300:  #DB969C;
  --pgn-danger-400:  #D2616B;
  --pgn-danger-500:  #C32D3A;
  --pgn-danger-600:  #B02934;
  --pgn-danger-700:  #9C242E;
  --pgn-danger-800:  #92222C;
  --pgn-danger-900:  #882028;

  /* ---------- Warning / Yellow (#FFD900) ---------- */
  --pgn-warning-100: #FFFAE6;
  --pgn-warning-200: #FFF0BF;
  --pgn-warning-300: #FFE680;
  --pgn-warning-400: #FFDE40;
  --pgn-warning-500: #FFD900;
  --pgn-warning-600: #E6C300;
  --pgn-warning-700: #CCAE00;
  --pgn-warning-800: #BFA300;
  --pgn-warning-900: #B39800;

  /* ---------- Light / Dark neutrals ---------- */
  --pgn-light-100: #FBFAF9;
  --pgn-light-300: #F0ECEA;
  --pgn-light-500: #E1DDDB;
  --pgn-light-700: #B4B1B0;

  --pgn-dark-100: #E9ECEB;
  --pgn-dark-300: #93A19A;
  --pgn-dark-500: #273F2F;
  --pgn-dark-700: #1F322A;
  --pgn-dark-900: #172822;

  /* ---------- Semantic aliases ---------- */
  --pgn-body-bg:           var(--pgn-white);
  --pgn-body-color:        var(--pgn-gray-700);
  --pgn-heading-color:     var(--pgn-black);
  --pgn-muted:             var(--pgn-gray-500);
  --pgn-border:            var(--pgn-gray-200);
  --pgn-divider:           var(--pgn-gray-100);
  --pgn-link:              var(--pgn-info-500);
  --pgn-link-hover:        #00557F;
  --pgn-brand-link:        var(--pgn-brand-500);

  --pgn-success-bg:        var(--pgn-success-100);
  --pgn-info-bg:           var(--pgn-info-100);
  --pgn-warning-bg:        var(--pgn-warning-100);
  --pgn-danger-bg:         var(--pgn-danger-100);

  /* ---------- Typography ---------- */
  --pgn-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --pgn-font-mono: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --pgn-fw-regular:  400;
  --pgn-fw-medium:   500;
  --pgn-fw-semibold: 500;   /* Paragon maps "semi-bold" → 500 */
  --pgn-fw-bold:     700;

  /* Display scale (desktop) */
  --pgn-display-1: 3.75rem;   /* 60 */
  --pgn-display-2: 4.875rem;  /* 78 */
  --pgn-display-3: 5.625rem;  /* 90 */
  --pgn-display-4: 7.5rem;    /* 120 */
  --pgn-display-mobile: 3.25rem;
  --pgn-display-lh: 1;

  /* Heading scale */
  --pgn-h1: 2.5rem;    /* 40 */
  --pgn-h2: 2rem;      /* 32 */
  --pgn-h3: 1.375rem;  /* 22 */
  --pgn-h4: 1.125rem;  /* 18 */
  --pgn-h5: 0.875rem;  /* 14 */
  --pgn-h6: 0.75rem;   /* 12 */
  --pgn-h1-mobile: 2.25rem;
  --pgn-heading-lh: 1.25;

  /* Body scale */
  --pgn-body-lg: 1.40625rem; /* 22.5 — base * 1.25 */
  --pgn-body:    1.125rem;   /* 18 — base */
  --pgn-body-sm: 0.875rem;   /* 14 */
  --pgn-body-xs: 0.75rem;    /* 12 */
  --pgn-body-micro: 0.688rem;/* 11 */

  --pgn-lh-base: 1.5556;
  --pgn-lh-micro: 0.938rem;

  /* ---------- Spacing (1rem = 16px, but base font = 18px) ---------- */
  --pgn-space-0:   0;
  --pgn-space-1:   0.25rem;   /* 4 */
  --pgn-space-1-5: 0.375rem;  /* 6 */
  --pgn-space-2:   0.5rem;    /* 8 */
  --pgn-space-2-5: 0.75rem;   /* 12 */
  --pgn-space-3:   1rem;      /* 16 */
  --pgn-space-3-5: 1.25rem;   /* 20 */
  --pgn-space-4:   1.5rem;    /* 24 */
  --pgn-space-4-5: 2rem;      /* 32 */
  --pgn-space-5:   3rem;      /* 48 */
  --pgn-space-5-5: 4rem;      /* 64 */
  --pgn-space-6:   5rem;      /* 80 */

  /* ---------- Radii ---------- */
  --pgn-radius-sm:   0.25rem;   /* 4 */
  --pgn-radius:      0.375rem;  /* 6 */
  --pgn-radius-lg:   0.425rem;  /* ~6.8 */
  --pgn-radius-pill: 50rem;

  /* ---------- Borders ---------- */
  --pgn-border-width: 1px;

  /* ---------- Elevation / shadow (down) ---------- */
  --pgn-shadow-1: 0 0.0625rem 0.125rem rgba(0,0,0,0.15), 0 0.0625rem 0.25rem rgba(0,0,0,0.15);
  --pgn-shadow-2: 0 0.125rem 0.25rem  rgba(0,0,0,0.15), 0 0.125rem 0.5rem  rgba(0,0,0,0.15);
  --pgn-shadow-3: 0 0.5rem 1rem        rgba(0,0,0,0.15), 0 0.25rem 0.625rem rgba(0,0,0,0.15);
  --pgn-shadow-4: 0 0.625rem 1.25rem   rgba(0,0,0,0.15), 0 0.5rem 1.25rem   rgba(0,0,0,0.15);
  --pgn-shadow-5: 0 1.25rem 2.5rem     rgba(0,0,0,0.15), 0 0.5rem 2.5rem    rgba(0,0,0,0.15);

  /* Focus ring */
  --pgn-focus-ring: 0 0 0 1px var(--pgn-primary-500);

  /* Motion */
  --pgn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pgn-transition: all 0.2s ease-in-out;
}

/* ============================================================
   Semantic element styles
   ============================================================ */
.pgn-root {
  font-family: var(--pgn-font-sans);
  font-size: var(--pgn-body);
  line-height: var(--pgn-lh-base);
  color: var(--pgn-body-color);
  background: var(--pgn-body-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pgn-root h1, .pgn-h1 {
  font-family: var(--pgn-font-sans);
  font-weight: var(--pgn-fw-bold);
  font-size: var(--pgn-h1);
  line-height: var(--pgn-heading-lh);
  letter-spacing: -0.02em;
  color: var(--pgn-heading-color);
  margin: 0 0 0.5rem;
}
.pgn-root h2, .pgn-h2 {
  font-family: var(--pgn-font-sans);
  font-weight: var(--pgn-fw-bold);
  font-size: var(--pgn-h2);
  line-height: var(--pgn-heading-lh);
  color: var(--pgn-heading-color);
  margin: 0 0 0.5rem;
}
.pgn-root h3, .pgn-h3 {
  font-family: var(--pgn-font-sans);
  font-weight: var(--pgn-fw-bold);
  font-size: var(--pgn-h3);
  line-height: var(--pgn-heading-lh);
  color: var(--pgn-heading-color);
  margin: 0 0 0.5rem;
}
.pgn-root h4, .pgn-h4 {
  font-family: var(--pgn-font-sans);
  font-weight: var(--pgn-fw-bold);
  font-size: var(--pgn-h4);
  line-height: var(--pgn-heading-lh);
  color: var(--pgn-heading-color);
  margin: 0 0 0.5rem;
}
.pgn-root h5, .pgn-h5 {
  font-family: var(--pgn-font-sans);
  font-weight: var(--pgn-fw-bold);
  font-size: var(--pgn-h5);
  line-height: var(--pgn-heading-lh);
  color: var(--pgn-heading-color);
  margin: 0 0 0.5rem;
}
.pgn-root h6, .pgn-h6 {
  font-family: var(--pgn-font-sans);
  font-weight: var(--pgn-fw-bold);
  font-size: var(--pgn-h6);
  line-height: var(--pgn-heading-lh);
  color: var(--pgn-heading-color);
  margin: 0 0 0.5rem;
}

.pgn-display-1 { font: var(--pgn-fw-bold) var(--pgn-display-1)/var(--pgn-display-lh) var(--pgn-font-sans); letter-spacing: -0.02em; color: var(--pgn-heading-color); }
.pgn-display-2 { font: var(--pgn-fw-bold) var(--pgn-display-2)/var(--pgn-display-lh) var(--pgn-font-sans); letter-spacing: -0.02em; color: var(--pgn-heading-color); }
.pgn-display-3 { font: var(--pgn-fw-bold) var(--pgn-display-3)/var(--pgn-display-lh) var(--pgn-font-sans); letter-spacing: -0.02em; color: var(--pgn-heading-color); }
.pgn-display-4 { font: var(--pgn-fw-bold) var(--pgn-display-4)/var(--pgn-display-lh) var(--pgn-font-sans); letter-spacing: -0.02em; color: var(--pgn-heading-color); }

.pgn-lead { font-size: var(--pgn-body-lg); line-height: 1.45; }
.pgn-p    { font-size: var(--pgn-body); line-height: var(--pgn-lh-base); margin: 0 0 1rem; }
.pgn-small{ font-size: var(--pgn-body-sm); }
.pgn-xs   { font-size: var(--pgn-body-xs); }
.pgn-micro{ font-size: var(--pgn-body-micro); line-height: 0.938rem; }

/* "Heading label" — mono, uppercase; a Paragon signature */
.pgn-heading-label {
  font-family: var(--pgn-font-mono);
  font-weight: var(--pgn-fw-regular);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pgn-heading-label--lg { font-size: 1rem; }
.pgn-heading-label--md { font-size: 0.875rem; }
.pgn-heading-label--sm { font-size: 0.75rem; }
.pgn-heading-label--xs { font-size: 0.688rem; }

.pgn-code, .pgn-mono {
  font-family: var(--pgn-font-mono);
  font-size: 0.9375em;
}

.pgn-link {
  color: var(--pgn-link);
  text-decoration: none;
}
.pgn-link:hover { color: var(--pgn-link-hover); text-decoration: underline; }

.pgn-inline-link {
  color: var(--pgn-link);
  text-decoration: underline;
  text-decoration-color: rgba(0,109,170,0.3);
}
.pgn-inline-link:hover { color: var(--pgn-link-hover); text-decoration-color: currentColor; }

.pgn-brand-link { color: var(--pgn-brand-500); text-decoration: none; }
.pgn-brand-link:hover { color: #7E0043; text-decoration: underline; }