/* Mellentaane e-Shared Design System — design tokens */
:root {
  --brand-950: #4f0a17;
  --brand-900: #751020;
  --brand-800: #8f1324;
  --brand-700: #a71528;
  --brand-600: #b92b40;
  --brand-500: #ca4659;
  --brand-400: #d66b7a;
  --brand-300: #e49aa5;
  --brand-200: #edbac2;
  --brand-150: #f2cbd1;
  --brand-100: #f8e2e6;
  --brand-050: #fff6f7;

  /* e-Shared-31 — unique official Mellentaane gradient. */
  --gradient-mellentaane: linear-gradient(
    118deg,
    var(--color-mellentaane-normal),
    var(--color-mellentaane-light)
  );

  /* Deprecated compatibility aliases. Shared components no longer use them. */
  --brand-gradient-start: var(--brand-700);
  --brand-gradient-mid: var(--brand-500);
  --brand-gradient-end: var(--brand-300);

  --ink-950: #1d1719;
  --ink-800: #342a2d;
  --ink-650: #594c50;
  --ink-500: #76696d;
  --ink-400: #94878b;
  --line: #eadcdf;
  --paper: #ffffff;
  --canvas: #f8f4f3;
  --cream: #fffaf5;
  --gold: #c79d45;
  --green: #1f7555;
  --blue: #315d8c;
  --success: #19724d;
  --warning: #956006;
  --danger: var(--brand-700);
  --info: var(--blue);

  --font: Calibri, "Segoe UI", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 5px 16px rgba(79, 10, 23, .07);
  --shadow-md: 0 16px 38px rgba(79, 10, 23, .11);
  --shadow-lg: 0 30px 72px rgba(79, 10, 23, .17);

  /* e-Shared-31 — default card hover behaviour. */
  --card-hover-lift: -2px;
  --card-hover-shadow: var(--shadow-md);
  --card-hover-duration: 180ms;
  --card-hover-easing: ease;
  --card-interactive-hover-lift: -3px;
  --card-interactive-hover-shadow: var(--shadow-lg);

  --header-h: 76px;
  --sidebar-w: 292px;
  --content-max: 1240px;
  --shell-max: 1700px;

  /* e-Shared-31 — compact desktop sidebar and accessible mobile targets. */
  --sidebar-group-gap: 16px;
  --sidebar-link-gap: 1px;
  --sidebar-link-padding-vertical: 7px;
  --sidebar-link-padding-right: 12px;
  --sidebar-link-padding-left: 16px;
  --sidebar-mobile-link-min-height: 44px;
  --sidebar-mobile-link-padding-vertical: 10px;
  --sidebar-mobile-link-padding-horizontal: 14px;
  --focus-ring: 0 0 0 3px rgba(255, 255, 255, .65), 0 0 0 6px rgba(167, 21, 40, .42);


  /* e-Shared-31 — unified information-panel visual contract. */
  --information-panel-learning-width: clamp(360px, 24vw, 430px);
  --information-panel-details-width: clamp(320px, 21vw, 380px);
  --information-panel-padding: var(--padding-medium);
  --information-panel-gap: var(--s4);
  --information-panel-section-gap: var(--s4);
  --information-panel-section-radius: var(--radius-medium);
  --information-panel-title-size: clamp(1.25rem, 1.6vw, 1.5rem);
  --information-panel-body-size: .94rem;
  --information-panel-muted-size: .86rem;
  --information-panel-eyebrow-size: .72rem;
  --information-panel-header-background: color-mix(in srgb, var(--color-white) 96%, transparent);
  --information-panel-section-background: var(--color-white);
  --information-panel-section-border: var(--color-gray-light);

  /* e-Shared-31 — floating Back-to-top geometry and mobile footer clearance. */
  --back-to-top-size: 44px;
  --back-to-top-right: 22px;
  --back-to-top-bottom: 22px;
  --back-to-top-clearance: 12px;
  --footer-padding-mobile: 16px;


  /* e-Shared-31 — semantic aliases used in human-readable instructions. */
  --color-mellentaane-dark: var(--brand-900);
  --color-mellentaane-normal: var(--brand-700);
  --color-mellentaane-light: var(--brand-300);
  --color-mellentaane-pale: var(--brand-050);

  --color-green-dark: #14513b;
  --color-green-normal: var(--green);
  --color-green-light: #9bcdbb;
  --color-green-pale: #eaf6f1;

  --color-blue-dark: #21476d;
  --color-blue-normal: var(--blue);
  --color-blue-light: #a7bfd8;
  --color-blue-pale: #edf3f8;

  /* e-Shared-31 — official orange palette, independent from --warning. */
  --color-orange-dark: #e63900;
  --color-orange-normal: #ff6633;
  --color-orange-light: #ff9f80;
  --color-orange-pale: #ffd9cc;

  --color-red-dark: var(--brand-900);
  --color-red-normal: var(--danger);
  --color-red-light: var(--brand-300);
  --color-red-pale: var(--brand-050);

  --color-gray-dark: var(--ink-800);
  --color-gray-normal: var(--ink-500);
  --color-gray-light: var(--line);
  --color-gray-pale: var(--canvas);
  --color-white: var(--paper);
  --color-black: var(--ink-950);

  --border-small: 1px;
  --border-medium: 2px;
  --border-large: 4px;
  --radius-small: var(--r-sm);
  --radius-medium: var(--r-md);
  --radius-large: var(--r-lg);
  --shared-reference-z: 99990;
  --margin-small: var(--s2);
  --margin-medium: var(--s4);
  --margin-large: var(--s6);
  --padding-small: var(--s2);
  --padding-medium: var(--s4);
  --padding-large: var(--s6);

}

:root { --content-background-color: #ffffff; }