:root{
  /* ---- Brand (OriginAI Agent Ring kit) ---- */
  --brand-ink:#14161C;
  --brand-ink-soft:#0E1017;
  --brand-porcelain:#F2F3F6;
  --brand-ultramarine:#3D52E0;
  --brand-ultramarine-lift:#5A6CF0;   /* on dark surfaces */
  --brand-ultramarine-deep:#2E3EB8;   /* pressed / hover */
  --brand-amber:#D08A18;              /* OriginAI Labs — education division */
  --brand-amber-lift:#E5A83B;
  --brand-amber-deep:#B0740F;

  /* ---- Neutral ramps (carried over from the LMS build) ---- */
  --white:#FFFFFF;
  --black:#000000;
  --gray-100:#E7E7E7;
  --gray-200:#D1D1D1;
  --gray-300:#B0B0B0;
  --gray-400:#888888;
  --gray-500:#6D6D6D;
  --gray-600:#5D5D5D;
  --gray-700:#4F4F4F;
  --gray-800:#3D3D3D;
  --gray-900:#191919;
  --light-100:#FEFEFE;
  --light-200:#FCFCFD;
  --light-300:#FBFBFD;
  --light-400:#F9FAFC;
  --light-500:#F8FAFB;
  --light-600:#F7F9FB;
  --light-700:#F6F8FA;
  --light-800:#F5F7FA;
  --light-900:#F4F6F9;
  --light:#F8F8F8;

  /* ---- Semantic status ---- */
  --success:#03C95A;      --success-hover:#029743;
  --info:#5625E8;         --info-hover:#4115C6;
  --warning:#FFC107;      --warning-hover:#D19D00;
  --danger:#E70D0D;       --danger-hover:#B70B0B;
  --purple:#AB47BC;
  --pink:#FD3995;
  --skyblue:#0DCAF0;
  --teal:#02A8B5;

  /* ---- Soft tints (badge + icon-box backgrounds) ---- */
  --primary-transparent:#ECEEFC;
  --secondary-transparent:#FBF2E3;
  --success-transparent:#E8FAF0;
  --warning-transparent:#FFF9E9;
  --danger-transparent:#FAE7E7;
  --info-transparent:#F0EBFD;
  --pink-transparent:#FFEDF6;
  --purple-transparent:#F7EEF9;
  --skyblue-transparent:#E9FAFE;
  --dark-transparent:#E8E8E8;

  /* ---- Semantic aliases: use these in product code ---- */
  --color-primary:var(--brand-ultramarine);
  --color-primary-hover:var(--brand-ultramarine-deep);
  --color-primary-active:var(--brand-ultramarine-deep);
  --color-primary-disabled:#B6BEF4;
  --color-on-primary:var(--white);
  --color-secondary:var(--brand-amber);
  --color-secondary-hover:var(--brand-amber-deep);
  --color-secondary-active:var(--brand-amber-deep);
  --color-on-secondary:var(--white);

  --surface-page:var(--white);
  --surface-page-alt:var(--light-900);
  --surface-card:var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--light-800);
  --surface-inverse:var(--brand-ink);

  --text-primary:var(--gray-900);
  --text-secondary:var(--gray-500);
  --text-tertiary:var(--gray-400);
  --text-disabled:var(--gray-300);
  --text-inverse:var(--brand-porcelain);
  --text-link:var(--color-primary);
  --text-link-hover:var(--color-secondary);

  --border-subtle:var(--light-800);
  --border-default:var(--gray-100);
  --border-strong:var(--gray-200);
  --border-focus:var(--color-primary);

  --focus-ring:0 0 0 3px rgba(61,82,224,.28);
  --overlay:rgba(20,22,28,.55);

  /* ---- Gradients (hero + profile banners) ---- */
  --gradient-brand:linear-gradient(10.93deg,#2E3EB8 16.22%,#5A6CF0 120.13%); /* @kind color */
  --gradient-ink:linear-gradient(135deg,#14161C 0%,#2E3EB8 100%); /* @kind color */
  --gradient-amber:linear-gradient(135deg,#B0740F 0%,#E5A83B 100%); /* @kind color */
  --gradient-signal:linear-gradient(180deg,rgba(217,217,217,0) 0%,#3D52E0 100%); /* @kind color */
}