/* =============================================================================
   INSTRUMENTAL SYSTEMS - DESIGN TOKENS
   Color system based on Radix UI scales
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SAND (Neutral)
----------------------------------------------------------------------------- */

:root,
.light,
.light-theme {
  --sand-1: #fdfdfc;
  --sand-2: #f9f9f8;
  --sand-3: #f1f0ef;
  --sand-4: #e9e8e6;
  --sand-5: #e2e1de;
  --sand-6: #dad9d6;
  --sand-7: #cfceca;
  --sand-8: #bcbbb5;
  --sand-9: #8d8d86;
  --sand-10: #82827c;
  --sand-11: #63635e;
  --sand-12: #21201c;

  --sand-a1: #55550003;
  --sand-a2: #25250007;
  --sand-a3: #20100010;
  --sand-a4: #1f150019;
  --sand-a5: #1f180021;
  --sand-a6: #19130029;
  --sand-a7: #19140035;
  --sand-a8: #1915014a;
  --sand-a9: #0f0f0079;
  --sand-a10: #0c0c0083;
  --sand-a11: #080800a1;
  --sand-a12: #060500e3;
}

.dark,
.dark-theme {
  --sand-1: #111110;
  --sand-2: #191918;
  --sand-3: #222221;
  --sand-4: #2a2a28;
  --sand-5: #31312e;
  --sand-6: #3b3a37;
  --sand-7: #494844;
  --sand-8: #62605b;
  --sand-9: #6f6d66;
  --sand-10: #7c7b74;
  --sand-11: #b5b3ad;
  --sand-12: #eeeeec;

  --sand-a1: #00000000;
  --sand-a2: #f4f4f309;
  --sand-a3: #f6f6f513;
  --sand-a4: #fefef31b;
  --sand-a5: #fbfbeb23;
  --sand-a6: #fffaed2d;
  --sand-a7: #fffbed3c;
  --sand-a8: #fff9eb57;
  --sand-a9: #fffae965;
  --sand-a10: #fffdee73;
  --sand-a11: #fffcf4b0;
  --sand-a12: #fffffded;
}

/* -----------------------------------------------------------------------------
   ORANGE (Brand / Accent)
----------------------------------------------------------------------------- */

:root,
.light,
.light-theme {
  --orange-1: #fefcfb;
  --orange-2: #fff7ed;
  --orange-3: #ffedd3;
  --orange-4: #ffdeb5;
  --orange-5: #ffd29d;
  --orange-6: #ffc58a;
  --orange-7: #f3b378;
  --orange-8: #e69c54;
  --orange-9: #f89622;
  --orange-10: #eb8b10;
  --orange-11: #b86100;
  --orange-12: #4f341a;

  --orange-a1: #c0400004;
  --orange-a2: #ff8e0012;
  --orange-a3: #ff97002c;
  --orange-a4: #ff8e014a;
  --orange-a5: #ff8a0062;
  --orange-a6: #ff810075;
  --orange-a7: #e9700087;
  --orange-a8: #da6c00ab;
  --orange-a9: #f78600dd;
  --orange-a10: #ea8300ef;
  --orange-a11: #b86100;
  --orange-a12: #3b1d00e5;

  --orange-contrast: #fff;
  --orange-surface: #fff5e9cc;
  --orange-indicator: #f89622;
  --orange-track: #f89622;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --orange-1: oklch(99.3% 0.0023 63.09);
      --orange-2: oklch(98.2% 0.0173 63.09);
      --orange-3: oklch(96.3% 0.0466 63.09);
      --orange-4: oklch(93.1% 0.0833 63.09);
      --orange-5: oklch(90.3% 0.1073 63.09);
      --orange-6: oklch(86.8% 0.1049 63.09);
      --orange-7: oklch(81.5% 0.1061 63.09);
      --orange-8: oklch(75.1% 0.1247 63.09);
      --orange-9: oklch(75.9% 0.164 63.09);
      --orange-10: oklch(72.4% 0.1617 63.09);
      --orange-11: oklch(58.2% 0.154 63.09);
      --orange-12: oklch(35.1% 0.0555 63.09);

      --orange-a1: color(display-p3 0.7569 0.2667 0.0235 / 0.016);
      --orange-a2: color(display-p3 0.9451 0.5333 0.0078 / 0.067);
      --orange-a3: color(display-p3 0.9294 0.5882 0.0039 / 0.161);
      --orange-a4: color(display-p3 0.9294 0.5373 0.0039 / 0.271);
      --orange-a5: color(display-p3 0.9255 0.5294 0.0039 / 0.357);
      --orange-a6: color(display-p3 0.9176 0.4863 0.0039 / 0.428);
      --orange-a7: color(display-p3 0.8275 0.4235 0.0039 / 0.495);
      --orange-a8: color(display-p3 0.7725 0.3922 0 / 0.62);
      --orange-a9: color(display-p3 0.8902 0.4745 0 / 0.746);
      --orange-a10: color(display-p3 0.8353 0.4471 0 / 0.785);
      --orange-a11: color(display-p3 0.6275 0.302 0 / 0.863);
      --orange-a12: color(display-p3 0.2 0.102 0 / 0.883);

      --orange-contrast: #fff;
      --orange-surface: color(display-p3 1 0.9608 0.9216 / 0.8);
      --orange-indicator: oklch(75.9% 0.164 63.09);
      --orange-track: oklch(75.9% 0.164 63.09);
    }
  }
}

.dark,
.dark-theme {
  --orange-1: #1d1813;
  --orange-2: #231b13;
  --orange-3: #37220d;
  --orange-4: #4a2300;
  --orange-5: #572c00;
  --orange-6: #653902;
  --orange-7: #7b4911;
  --orange-8: #9e5d12;
  --orange-9: #f89622;
  --orange-10: #ec8b05;
  --orange-11: #ffa336;
  --orange-12: #ffdfc3;

  --orange-a1: #e5000005;
  --orange-a2: #ee44000c;
  --orange-a3: #fa5d0022;
  --orange-a4: #fc470037;
  --orange-a5: #ff600045;
  --orange-a6: #fd790055;
  --orange-a7: #ff8a086d;
  --orange-a8: #ff8f0e94;
  --orange-a9: #fe9922f8;
  --orange-a10: #ff9504ea;
  --orange-a11: #ffa336;
  --orange-a12: #ffdfc3;

  --orange-contrast: #fff;
  --orange-surface: #2d1d0f80;
  --orange-indicator: #f89622;
  --orange-track: #f89622;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --orange-1: oklch(21.3% 0.012 63.09);
      --orange-2: oklch(23% 0.0193 63.09);
      --orange-3: oklch(27.3% 0.0455 63.09);
      --orange-4: oklch(30.4% 0.0801 63.09);
      --orange-5: oklch(34.1% 0.0873 63.09);
      --orange-6: oklch(38.9% 0.0874 63.09);
      --orange-7: oklch(45.5% 0.0952 63.09);
      --orange-8: oklch(54.1% 0.1168 63.09);
      --orange-9: oklch(75.9% 0.164 63.09);
      --orange-10: oklch(72.4% 0.164 63.09);
      --orange-11: oklch(79.9% 0.164 63.09);
      --orange-12: oklch(92.5% 0.0527 63.09);

      --orange-a1: color(display-p3 0.9412 0 0 / 0.014);
      --orange-a2: color(display-p3 0.9804 0.2941 0 / 0.04);
      --orange-a3: color(display-p3 0.9961 0.4314 0 / 0.118);
      --orange-a4: color(display-p3 1 0.3451 0 / 0.192);
      --orange-a5: color(display-p3 1 0.4392 0 / 0.244);
      --orange-a6: color(display-p3 1 0.5373 0.0078 / 0.305);
      --orange-a7: color(display-p3 1 0.5961 0.1569 / 0.396);
      --orange-a8: color(display-p3 0.9961 0.6118 0.1961 / 0.54);
      --orange-a9: color(display-p3 1 0.6588 0.2706 / 0.909);
      --orange-a10: color(display-p3 1 0.6431 0.2235 / 0.861);
      --orange-a11: color(display-p3 1 0.6902 0.3255 / 0.944);
      --orange-a12: color(display-p3 0.9961 0.8941 0.7882 / 0.979);

      --orange-contrast: #fff;
      --orange-surface: color(display-p3 0.1647 0.1098 0.0627 / 0.5);
      --orange-indicator: oklch(75.9% 0.164 63.09);
      --orange-track: oklch(75.9% 0.164 63.09);
    }
  }
}

/* -----------------------------------------------------------------------------
   RED (Destructive / Error)
----------------------------------------------------------------------------- */

:root,
.light,
.light-theme {
  --red-1: #fefdfc;
  --red-2: #fef8f7;
  --red-3: #faedea;
  --red-4: #fbe0db;
  --red-5: #f7d4cd;
  --red-6: #f1c5bd;
  --red-7: #e8b3a9;
  --red-8: #dd998d;
  --red-9: #aa5042;
  --red-10: #9b4235;
  --red-11: #a84e40;
  --red-12: #512a23;

  --red-a1: #aa550003;
  --red-a2: #e0200008;
  --red-a3: #c3250015;
  --red-a4: #e3240024;
  --red-a5: #d7240032;
  --red-a6: #c91f0042;
  --red-a7: #bb1e0056;
  --red-a8: #b31b0072;
  --red-a9: #8c1300bd;
  --red-a10: #811100ca;
  --red-a11: #8b1300bf;
  --red-a12: #350800dc;

  --red-contrast: #fff;
  --red-surface: #fef6f5cc;
  --red-indicator: #aa5042;
  --red-track: #aa5042;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --red-1: oklch(99.4% 0.0021 30.53);
      --red-2: oklch(98.3% 0.0063 30.53);
      --red-3: oklch(95.5% 0.0149 30.53);
      --red-4: oklch(92.7% 0.0302 30.53);
      --red-5: oklch(89.6% 0.0407 30.53);
      --red-6: oklch(86% 0.051 30.53);
      --red-7: oklch(81.1% 0.0643 30.53);
      --red-8: oklch(74.6% 0.084 30.53);
      --red-9: oklch(54.1% 0.1214 30.53);
      --red-10: oklch(49.4% 0.1214 30.53);
      --red-11: oklch(53.4% 0.1214 30.53);
      --red-12: oklch(33.5% 0.0603 30.53);

      --red-a1: color(display-p3 0.6745 0.349 0.0235 / 0.012);
      --red-a2: color(display-p3 0.7569 0.1451 0.0196 / 0.032);
      --red-a3: color(display-p3 0.6549 0.1098 0.0078 / 0.079);
      --red-a4: color(display-p3 0.7451 0.149 0.0078 / 0.138);
      --red-a5: color(display-p3 0.7176 0.149 0.0078 / 0.193);
      --red-a6: color(display-p3 0.6745 0.1255 0.0039 / 0.251);
      --red-a7: color(display-p3 0.6353 0.1216 0.0039 / 0.33);
      --red-a8: color(display-p3 0.6039 0.1098 0.0039 / 0.436);
      --red-a9: color(display-p3 0.4784 0.0784 0 / 0.722);
      --red-a10: color(display-p3 0.4353 0.0667 0 / 0.773);
      --red-a11: color(display-p3 0.4745 0.0745 0 / 0.73);
      --red-a12: color(display-p3 0.1804 0.0314 0 / 0.855);

      --red-contrast: #fff;
      --red-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8);
      --red-indicator: oklch(54.1% 0.1214 30.53);
      --red-track: oklch(54.1% 0.1214 30.53);
    }
  }
}

.dark,
.dark-theme {
  --red-1: #1e1716;
  --red-2: #231a18;
  --red-3: #3b1c17;
  --red-4: #4f1b13;
  --red-5: #5d2118;
  --red-6: #6c2d23;
  --red-7: #833d32;
  --red-8: #a94f41;
  --red-9: #aa5042;
  --red-10: #9b4235;
  --red-11: #fd9a89;
  --red-12: #f9d4cd;

  --red-a1: #ee000006;
  --red-a2: #ee2f190c;
  --red-a3: #fe2e1226;
  --red-a4: #ff22033c;
  --red-a5: #fd34194c;
  --red-a6: #fd50375d;
  --red-a7: #ff675176;
  --red-a8: #ff705aa0;
  --red-a9: #ff715ba1;
  --red-a10: #fe614b91;
  --red-a11: #ff9b8afd;
  --red-a12: #fed8d1f9;

  --red-contrast: #fff;
  --red-surface: #2d1b1880;
  --red-indicator: #aa5042;
  --red-track: #aa5042;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --red-1: oklch(21.3% 0.011 30.53);
      --red-2: oklch(22.8% 0.0156 30.53);
      --red-3: oklch(26.9% 0.0508 30.53);
      --red-4: oklch(30.1% 0.0811 30.53);
      --red-5: oklch(33.7% 0.0905 30.53);
      --red-6: oklch(38.3% 0.0928 30.53);
      --red-7: oklch(44.9% 0.0996 30.53);
      --red-8: oklch(53.8% 0.1214 30.53);
      --red-9: oklch(54.1% 0.1214 30.53);
      --red-10: oklch(49.4% 0.1214 30.53);
      --red-11: oklch(78.4% 0.1214 30.53);
      --red-12: oklch(89.9% 0.0434 30.53);

      --red-a1: color(display-p3 0.9725 0 0 / 0.018);
      --red-a2: color(display-p3 0.9804 0.1961 0.098 / 0.04);
      --red-a3: color(display-p3 1 0.251 0.0941 / 0.131);
      --red-a4: color(display-p3 1 0.1922 0.0588 / 0.209);
      --red-a5: color(display-p3 1 0.2784 0.1529 / 0.266);
      --red-a6: color(display-p3 1 0.3882 0.2627 / 0.327);
      --red-a7: color(display-p3 1 0.4706 0.3725 / 0.422);
      --red-a8: color(display-p3 0.9961 0.4941 0.4078 / 0.579);
      --red-a9: color(display-p3 1 0.502 0.4118 / 0.583);
      --red-a10: color(display-p3 1 0.4471 0.349 / 0.518);
      --red-a11: color(display-p3 1 0.6627 0.5843 / 0.931);
      --red-a12: color(display-p3 1 0.8784 0.8471 / 0.948);

      --red-contrast: #fff;
      --red-surface: color(display-p3 0.1647 0.102 0.0941 / 0.5);
      --red-indicator: oklch(54.1% 0.1214 30.53);
      --red-track: oklch(54.1% 0.1214 30.53);
    }
  }
}

/* -----------------------------------------------------------------------------
   GREEN (Success / Positive)
----------------------------------------------------------------------------- */

:root,
.light,
.light-theme {
  --green-1: #fbfdfb;
  --green-2: #f7faf6;
  --green-3: #e7f6e6;
  --green-4: #d9f0d6;
  --green-5: #cbe8c8;
  --green-6: #bcddb8;
  --green-7: #a9cea6;
  --green-8: #8ebb8a;
  --green-9: #5e825b;
  --green-10: #51754e;
  --green-11: #527650;
  --green-12: #263624;

  --green-a1: #00800004;
  --green-a2: #1d720009;
  --green-a3: #0ba40019;
  --green-a4: #13a20029;
  --green-a5: #0e950037;
  --green-a6: #0f850047;
  --green-a7: #09730059;
  --green-a8: #096b0075;
  --green-a9: #053d00a4;
  --green-a10: #053800b1;
  --green-a11: #033800af;
  --green-a12: #021500db;

  --green-contrast: #fff;
  --green-surface: #f5f9f4cc;
  --green-indicator: #5e825b;
  --green-track: #5e825b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --green-1: oklch(99.3% 0.003 142.7);
      --green-2: oklch(98.2% 0.0068 142.7);
      --green-3: oklch(95.8% 0.0271 142.7);
      --green-4: oklch(93.2% 0.0426 142.7);
      --green-5: oklch(90.2% 0.0538 142.7);
      --green-6: oklch(86.4% 0.0616 142.7);
      --green-7: oklch(81.5% 0.0687 142.7);
      --green-8: oklch(74.8% 0.0845 142.7);
      --green-9: oklch(56.9% 0.0715 142.7);
      --green-10: oklch(52.4% 0.0715 142.7);
      --green-11: oklch(52.8% 0.0715 142.7);
      --green-12: oklch(31.4% 0.0383 142.7);

      --green-a1: color(display-p3 0.0235 0.5137 0.0235 / 0.016);
      --green-a2: color(display-p3 0.2392 0.4588 0.0235 / 0.036);
      --green-a3: color(display-p3 0.1333 0.6314 0.0118 / 0.095);
      --green-a4: color(display-p3 0.1294 0.5922 0.0039 / 0.153);
      --green-a5: color(display-p3 0.1176 0.5412 0.0039 / 0.204);
      --green-a6: color(display-p3 0.1059 0.4863 0.0039 / 0.267);
      --green-a7: color(display-p3 0.0863 0.4196 0.0039 / 0.338);
      --green-a8: color(display-p3 0.0824 0.3922 0.0039 / 0.444);
      --green-a9: color(display-p3 0.0431 0.2118 0 / 0.628);
      --green-a10: color(display-p3 0.0431 0.1961 0 / 0.679);
      --green-a11: color(display-p3 0.0353 0.1922 0 / 0.671);
      --green-a12: color(display-p3 0.0157 0.0745 0 / 0.851);

      --green-contrast: #fff;
      --green-surface: color(display-p3 0.9608 0.9765 0.9569 / 0.8);
      --green-indicator: oklch(56.9% 0.0715 142.7);
      --green-track: oklch(56.9% 0.0715 142.7);
    }
  }
}

.dark,
.dark-theme {
  --green-1: #161a16;
  --green-2: #1a1f1a;
  --green-3: #232d22;
  --green-4: #2a3a29;
  --green-5: #324731;
  --green-6: #3c543a;
  --green-7: #466344;
  --green-8: #52754f;
  --green-9: #5e825b;
  --green-10: #51754e;
  --green-11: #aad0a6;
  --green-12: #d1f2ce;

  --green-a1: #00990002;
  --green-a2: #3ef46107;
  --green-a3: #88f78717;
  --green-a4: #8ffd8d25;
  --green-a5: #96ff9533;
  --green-a6: #a0fd9c42;
  --green-a7: #a4fda053;
  --green-a8: #a8ffa266;
  --green-a9: #affdab75;
  --green-a10: #a5ff9f66;
  --green-a11: #cfffcacb;
  --green-a12: #dcffd9f1;

  --green-contrast: #fff;
  --green-surface: #1b251c80;
  --green-indicator: #5e825b;
  --green-track: #5e825b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --green-1: oklch(21.3% 0.0101 142.7);
      --green-2: oklch(23.2% 0.012 142.7);
      --green-3: oklch(28.4% 0.0237 142.7);
      --green-4: oklch(33% 0.0371 142.7);
      --green-5: oklch(37.3% 0.0447 142.7);
      --green-6: oklch(41.8% 0.0525 142.7);
      --green-7: oklch(46.8% 0.061 142.7);
      --green-8: oklch(52.5% 0.0715 142.7);
      --green-9: oklch(56.9% 0.0715 142.7);
      --green-10: oklch(52.4% 0.0715 142.7);
      --green-11: oklch(81.9% 0.0715 142.7);
      --green-12: oklch(92.7% 0.0589 142.7);

      --green-a1: color(display-p3 0 0.8824 0 / 0.005);
      --green-a2: color(display-p3 0.3922 0.9725 0.3882 / 0.027);
      --green-a3: color(display-p3 0.6392 1 0.5922 / 0.087);
      --green-a4: color(display-p3 0.6431 1 0.5843 / 0.144);
      --green-a5: color(display-p3 0.6784 1 0.6353 / 0.196);
      --green-a6: color(display-p3 0.7176 0.9961 0.6549 / 0.253);
      --green-a7: color(display-p3 0.7294 1 0.6745 / 0.318);
      --green-a8: color(display-p3 0.7333 1 0.6784 / 0.396);
      --green-a9: color(display-p3 0.7647 0.9961 0.7098 / 0.453);
      --green-a10: color(display-p3 0.7333 1 0.6706 / 0.396);
      --green-a11: color(display-p3 0.8588 1 0.8157 / 0.792);
      --green-a12: color(display-p3 0.8902 0.9961 0.8667 / 0.94);

      --green-contrast: #fff;
      --green-surface: color(display-p3 0.1098 0.1412 0.1098 / 0.5);
      --green-indicator: oklch(56.9% 0.0715 142.7);
      --green-track: oklch(56.9% 0.0715 142.7);
    }
  }
}

/* -----------------------------------------------------------------------------
   BLUE (Informational / Link)
----------------------------------------------------------------------------- */

:root,
.light,
.light-theme {
  --blue-1: #fafdff;
  --blue-2: #f3f9fd;
  --blue-3: #e6f5fd;
  --blue-4: #d7eefb;
  --blue-5: #c6e4f5;
  --blue-6: #b3d7ec;
  --blue-7: #9ac7e0;
  --blue-8: #72b0d2;
  --blue-9: #337ca0;
  --blue-10: #236e92;
  --blue-11: #297397;
  --blue-12: #1f3f4f;

  --blue-a1: #0099ff05;
  --blue-a2: #0080d50c;
  --blue-a3: #0099eb19;
  --blue-a4: #0093e628;
  --blue-a5: #0087d339;
  --blue-a6: #0079c04c;
  --blue-a7: #0072b165;
  --blue-a8: #0071ae8d;
  --blue-a9: #005b88cc;
  --blue-a10: #005781dc;
  --blue-a11: #005883d6;
  --blue-a12: #002437e0;

  --blue-contrast: #fff;
  --blue-surface: #f0f8fdcc;
  --blue-indicator: #337ca0;
  --blue-track: #337ca0;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --blue-1: oklch(99.3% 0.0043 233.2);
      --blue-2: oklch(98% 0.0082 233.2);
      --blue-3: oklch(96% 0.0199 233.2);
      --blue-4: oklch(93.5% 0.0298 233.2);
      --blue-5: oklch(90.3% 0.039 233.2);
      --blue-6: oklch(86.1% 0.0483 233.2);
      --blue-7: oklch(80.6% 0.06 233.2);
      --blue-8: oklch(72.9% 0.0805 233.2);
      --blue-9: oklch(55.6% 0.0908 233.2);
      --blue-10: oklch(51.1% 0.0908 233.2);
      --blue-11: oklch(52.7% 0.0908 233.2);
      --blue-12: oklch(35% 0.0469 233.2);

      --blue-a1: color(display-p3 0.0235 0.5137 1 / 0.016);
      --blue-a2: color(display-p3 0.0196 0.4667 0.8235 / 0.044);
      --blue-a3: color(display-p3 0.0118 0.5529 0.8667 / 0.087);
      --blue-a4: color(display-p3 0.0078 0.5059 0.8627 / 0.142);
      --blue-a5: color(display-p3 0 0.451 0.7647 / 0.2);
      --blue-a6: color(display-p3 0.0039 0.4078 0.698 / 0.271);
      --blue-a7: color(display-p3 0.0039 0.3843 0.6314 / 0.361);
      --blue-a8: color(display-p3 0.0039 0.3647 0.6235 / 0.499);
      --blue-a9: color(display-p3 0 0.2784 0.4667 / 0.722);
      --blue-a10: color(display-p3 0 0.2588 0.4353 / 0.777);
      --blue-a11: color(display-p3 0 0.2667 0.4471 / 0.757);
      --blue-a12: color(display-p3 0 0.1059 0.1765 / 0.848);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.9451 0.9725 0.9922 / 0.8);
      --blue-indicator: oklch(55.6% 0.0908 233.2);
      --blue-track: oklch(55.6% 0.0908 233.2);
    }
  }
}

.dark,
.dark-theme {
  --blue-1: #111a1f;
  --blue-2: #141f25;
  --blue-3: #132d3a;
  --blue-4: #10384c;
  --blue-5: #16455c;
  --blue-6: #20536d;
  --blue-7: #2b6583;
  --blue-8: #347ca0;
  --blue-9: #337ca0;
  --blue-10: #336e8b;
  --blue-11: #7dc4eb;
  --blue-12: #c6ebff;

  --blue-a1: #0039f808;
  --blue-a2: #007ff60f;
  --blue-a3: #00a0fd26;
  --blue-a4: #00a2fc3a;
  --blue-a5: #0facfd4c;
  --blue-a6: #2cb7ff5e;
  --blue-a7: #40bcfd77;
  --blue-a8: #47c1fe97;
  --blue-a9: #45c1fe97;
  --blue-a10: #4dc3ff7f;
  --blue-a11: #87d4ffe9;
  --blue-a12: #c6ebff;

  --blue-contrast: #fff;
  --blue-surface: #10253280;
  --blue-indicator: #337ca0;
  --blue-track: #337ca0;
}

/* -----------------------------------------------------------------------------
   VIOLET (production accent - minimal scale: only the tokens the cards use)
----------------------------------------------------------------------------- */
:root,
.light,
.light-theme {
  --violet-9: #6f5bb8;
  --violet-11: #5d4a9e;
  --violet-a2: #4b00b510;
}

.dark,
.dark-theme {
  /* -9 is theme-constant and equals the hardcoded o-scope trace (#6f5bb8),
     matching how red/green/blue-9 work - keeps the card line + tag borders
     the same colour as the trace. */
  --violet-9: #6f5bb8;
  --violet-11: #b9aae8;
  --violet-a2: #8b6bff14;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --blue-1: oklch(21.3% 0.0165 233.2);
      --blue-2: oklch(23.1% 0.0189 233.2);
      --blue-3: oklch(28.3% 0.0406 233.2);
      --blue-4: oklch(32.4% 0.0561 233.2);
      --blue-5: oklch(36.9% 0.0633 233.2);
      --blue-6: oklch(42.1% 0.0687 233.2);
      --blue-7: oklch(48.3% 0.0768 233.2);
      --blue-8: oklch(55.8% 0.0908 233.2);
      --blue-9: oklch(55.6% 0.0908 233.2);
      --blue-10: oklch(51.1% 0.0768 233.2);
      --blue-11: oklch(78.8% 0.0908 233.2);
      --blue-12: oklch(91.9% 0.0483 233.2);

      --blue-a1: color(display-p3 0 0.251 1 / 0.026);
      --blue-a2: color(display-p3 0 0.5529 1 / 0.052);
      --blue-a3: color(display-p3 0.098 0.6196 1 / 0.143);
      --blue-a4: color(display-p3 0.1333 0.6392 1 / 0.217);
      --blue-a5: color(display-p3 0.2353 0.6902 1 / 0.286);
      --blue-a6: color(display-p3 0.3294 0.7216 1 / 0.36);
      --blue-a7: color(display-p3 0.3843 0.749 1 / 0.451);
      --blue-a8: color(display-p3 0.4157 0.7569 1 / 0.576);
      --blue-a9: color(display-p3 0.4118 0.7569 1 / 0.576);
      --blue-a10: color(display-p3 0.4314 0.7765 1 / 0.485);
      --blue-a11: color(display-p3 0.6039 0.8353 1 / 0.897);
      --blue-a12: color(display-p3 0.8118 0.9255 1 / 0.992);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.0745 0.1333 0.1882 / 0.5);
      --blue-indicator: oklch(55.6% 0.0908 233.2);
      --blue-track: oklch(55.6% 0.0908 233.2);
    }
  }
}

/* -----------------------------------------------------------------------------
   SEMANTIC ALIASES
   Map raw scale tokens to purpose-driven names.
   Update here to retheme the entire site.
----------------------------------------------------------------------------- */

:root,
.light,
.light-theme {
  /* Backgrounds */
  --color-bg: var(--sand-1);
  --color-bg-subtle: var(--sand-2);
  --color-bg-muted: var(--sand-3);

  /* Borders */
  --color-border: var(--sand-6);
  --color-border-strong: var(--sand-7);

  /* Text */
  --color-text: var(--sand-12);
  --color-text-muted: var(--sand-11);
  --color-text-subtle: var(--sand-9);

  /* Brand */
  --color-accent: var(--orange-9);
  --color-accent-hover: var(--orange-10);
  --color-accent-text: var(--orange-11);
  --color-accent-bg: var(--orange-3);

  /* Semantic */
  --color-success: var(--green-9);
  --color-error: var(--red-9);
  --color-info: var(--blue-9);
}

.dark,
.dark-theme {
  /* Backgrounds */
  --color-bg: var(--sand-1);
  --color-bg-subtle: var(--sand-2);
  --color-bg-muted: var(--sand-3);

  /* Borders */
  --color-border: var(--sand-6);
  --color-border-strong: var(--sand-7);

  /* Text */
  --color-text: var(--sand-12);
  --color-text-muted: var(--sand-11);
  --color-text-subtle: var(--sand-9);

  /* Brand */
  --color-accent: var(--orange-9);
  --color-accent-hover: var(--orange-10);
  --color-accent-text: var(--orange-11);
  --color-accent-bg: var(--orange-3);

  /* Semantic */
  --color-success: var(--green-9);
  --color-error: var(--red-9);
  --color-info: var(--blue-9);
}

/* -----------------------------------------------------------------------------
   TYPOGRAPHY
----------------------------------------------------------------------------- */

:root {
  --font-display: "Sora", sans-serif;
  --font-body: "SF Pro Text", sans-serif;

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
}

/* -----------------------------------------------------------------------------
   SPACING & RADIUS
----------------------------------------------------------------------------- */

:root {
  --space-1: 0.25rem; /* 4px  */
  --space-2: 0.5rem; /* 8px  */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}