/* =========================================================
  THEME VARIABLES
  ========================================================= 
  Notes - Example of previous values:
  --brand: #583EC5; / #996fed; /
  --alternate-brand: #996FEB; / #9457eb; /
  --headings: #2a2456; / #2a1e42; /
  --text: #3A3A3A; / #45326b; /
  --primary-background: #fff;
  --secondary-background: #f6f6f9; / #f5f3f7 /
  --alternate-background: #1c133f; / #211733 /
  --subtle-background: #ebeaf1; / #eae5f8 /
  --other-supporting: #453798; / #9c87c7 /
  */

  .not-real {
  --brand: #583EC5; /* #996fed; */
  --alternate-brand: #996FEB; /* #9457eb; */
  --headings: #2a2456; /* #2a1e42; */
  --text: #3A3A3A; /* #45326b; */
  --primary-background: #fff;
  --secondary-background: #f6f6f9; /* #f5f3f7 */
  --alternate-background: #1c133f; /* #211733 */
  --subtle-background: #ebeaf1; /* #eae5f8 */
  --other-supporting: #453798; /* #9c87c7 */
  }

:root {
  --brand: var(--ast-global-color-0);
  --alternate-brand: var(--ast-global-color-1);
  --headings: var(--ast-global-color-2);
  --text: var(--ast-global-color-3);
  --primary-background: var(--ast-global-color-4);
  --secondary-background: var(--ast-global-color-5);
  --alternate-background: var(--ast-global-color-6);
  --subtle-background: var(--ast-global-color-7);
  --other-supporting: var(--ast-global-color-8);

  /* Extended semantic tokens */
  --brand-soft: color-mix(in srgb, var(--brand) 12%, var(--primary-background));
  --brand-strong: color-mix(in srgb, var(--brand) 75%, #000);
  --brand-contrast: color-mix(in srgb, var(--brand) 15%, var(--secondary-background));

  --text-muted: color-mix(in srgb, var(--text) 70%, var(--primary-background));
  --text-on-dark: color-mix(in srgb, #fff 90%, var(--secondary-background));
  --text-on-light: color-mix(in srgb, #000 75%, var(--primary-background));

  --border-color: color-mix(in srgb, var(--text) 20%, var(--primary-background));
  --border-strong: color-mix(in srgb, var(--brand) 35%, var(--text));

  --surface: var(--primary-background);
  --surface-alt: var(--secondary-background);
  --surface-muted: var(--subtle-background);
  --surface-inverse: var(--alternate-background);

  --focus-ring: color-mix(in srgb, var(--brand) 55%, #fff);
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.18);

  --success: #4caf50;
  --warning: #f5c451;
  --danger: #e45865;
}