/* This file should be imported first to set the cascade layer precendence */
@layer reset, base, components, utilities;

:root {
  --inline-space: 1ch;
  --inline-space-quarter: calc(var(--inline-space) / 4);
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-one-and-a-half: calc(var(--inline-space) * 1.5);
  --inline-space-double: calc(var(--inline-space) * 2);

  --block-space: 1rem;
  --block-space-quarter: calc(var(--block-space) / 4);
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-one-and-a-half: calc(var(--block-space) * 1.5);
  --block-space-double: calc(var(--block-space) * 2);
  --block-space-triple: calc(var(--block-space) * 3);

  --txt-x-small: 0.6rem;
  --txt-small: 0.8rem;
  --txt-medium: 1rem;
  --txt-large: 1.4rem;
  --txt-x-large: 1.8rem;
  --txt-xx-large: 2.4rem;

  --font-small-responsive: clamp(0.8rem, 2cqi, 1rem);
  --font-medium-responsive: clamp(1rem, 2.5cqi, 1.4rem);
  --font-large-responsive: clamp(1.3rem, 4cqi, 1.8rem);
  --font-x-large-responsive: clamp(1.8rem, 5cqi, 3.2rem);

  --shadow-base: 0 -1px 1px oklch(var(--lch-black) / 2.5%), 0 1px 2px -0.5px oklch(var(--lch-black) / 5%);
  --shadow-small: var(--shadow-base), 0 2px 4px -1px oklch(var(--lch-black) / 10%);
  --shadow-medium: var(--shadow-small), 0 4px 8px -2px oklch(var(--lch-black) / 10%);
  --shadow-large: var(--shadow-medium), 0 16px 32px -8px oklch(var(--lch-black) / 10%);

  --z-toolbar: 5;
  --z-header: 10;
  --z-popup: 20;

  --btn-size: 2.65em;

  /* Colors
  /* ------------------------------------------------------------------------ */

  /* Fixed */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  --color-black: oklch(var(--lch-black));
  --color-white: oklch(var(--lch-white));

  /* Adaptive */
  --lch-ink: var(--lch-black);
  --color-ink-dark: oklch(26.72% 0 118.64);
  --color-ink-medium: oklch(53.02% 0 118.64);
  --color-ink-light: oklch(74.14% 0 118.64);
  --color-ink-lighter: oklch(87.07% 0 118.64);
  --color-ink-lightest: oklch(91.38% 0 118.64);
  --color-ink-body: oklch(94.83% 0 118.64);
  --color-ink: var(--color-ink-dark);

  --lch-ink-inverted: var(--lch-white);
  --color-ink-inverted: oklch(var(--lch-ink-inverted));

  --lch-red: 55.31% 0.1672 25.86;
  --color-red-dark: oklch(38.55% 0.1623 22.11);
  --color-red-medium: oklch(var(--lch-red));
  --color-red-light: oklch(74.76% 0.0832 30.01);
  --color-red-lighter: oklch(87.36% 0.0421 32.26);
  --color-red-lightest: oklch(91.53% 0.0225 34.26);
  --color-red-body: oklch(94.91% 0.014 38.18);
  --color-red: var(--color-red-medium);

  --lch-orange: 54.03% 0.1366 57.89;
  --color-orange-dark: oklch(37.59% 0.1057 55);
  --color-orange-medium: oklch(var(--lch-orange));
  --color-orange-light: oklch(74.31% 0.0961 65.35);
  --color-orange-lighter: oklch(87.1% 0.0487 67.68);
  --color-orange-lightest: oklch(91.37% 0.0235 70.19);
  --color-orange-body: oklch(94.81% 0.0131 73.13);
  --color-orange: var(--color-orange-medium);

  --lch-green: 51.71% 0.119 152.78;
  --color-green-dark: oklch(35.11% 0.0986 156.53);
  --color-green-medium: oklch(var(--lch-green));
  --color-green-light: oklch(73.23% 0.0816 148.51);
  --color-green-lighter: oklch(86.57% 0.045 144.07);
  --color-green-lightest: oklch(91.13% 0.0224 139.55);
  --color-green-body: oklch(94.71% 0.0111 134.96);
  --color-green: var(--color-green-medium);

  --lch-blue: 52.68% 0.1237 237.71;
  --color-blue-dark: oklch(36.33% 0.103 237.2);
  --color-blue-medium: oklch(var(--lch-blue));
  --color-blue-light: oklch(74.14% 0.0683 241.73);
  --color-blue-lighter: oklch(87.05% 0.0331 241.62);
  --color-blue-lightest: oklch(91.35% 0.0164 238.07);
  --color-blue-body: oklch(94.8% 0.011 236.15);
  --color-blue: var(--color-blue-medium);

  --lch-purple: 55.27% 0.1955 290.39;
  --color-purple-dark: oklch(38.06% 0.1339 292.21);
  --color-purple-medium: oklch(var(--lch-purple));
  --color-purple-light: oklch(74.99% 0.081 299.06);
  --color-purple-lighter: oklch(87.42% 0.0352 300.08);
  --color-purple-lightest: oklch(91.56% 0.0189 299.61);
  --color-purple-body: oklch(94.93% 0.0108 298.82);
  --color-purple: var(--color-purple-medium);

  @media (prefers-color-scheme: dark) {
    --lch-ink: var(--lch-white);
    --color-ink-dark: oklch(84.48% 0 118.64);
    --color-ink-medium: oklch(66.38% 0 118.64);
    --color-ink-light: oklch(51.72% 0 118.64);
    --color-ink-lighter: oklch(41.38% 0 118.64);
    --color-ink-lightest: oklch(34.48% 0 118.64);
    --color-ink-canvas: oklch(29.31% 0 118.64);
    --color-ink-body: oklch(24.14% 0 118.64);

    --lch-ink-inverted: var(--lch-black);

    --lch-red: 67.63% 0.1594 30.57;
    --color-red-dark: oklch(85.21% 0.1047 33.88);
    --color-red-light: oklch(52.36% 0.0823 29.64);
    --color-red-lighter: oklch(41.68% 0.0393 28.18);
    --color-red-lightest: oklch(34.66% 0.0227 26.42);
    --color-red-canvas: oklch(29.47% 0.02 24.52);
    --color-red-body: oklch(24.31% 0.0199 22.58);

    --lch-orange: 66.64% 0.114 65.3;
    --color-orange-dark: oklch(84.57% 0.1 70.19);
    --color-orange-light: oklch(51.93% 0.0723 60.45);
    --color-orange-lighter: oklch(41.51% 0.0406 55.6);
    --color-orange-lightest: oklch(34.59% 0.0262 50.96);
    --color-orange-canvas: oklch(29.4% 0.0187 46.56);
    --color-orange-body: oklch(24.23% 0.0177 42.33);

    --lch-green: 65.15% 0.1118 150.04;
    --color-green-dark: oklch(83.49% 0.0898 146.11);
    --color-green-light: oklch(51.07% 0.0569 158);
    --color-green-lighter: oklch(41.08% 0.026 165.99);
    --color-green-lightest: oklch(34.28% 0.0175 170);
    --color-green-canvas: oklch(29.15% 0.0146 174.01);
    --color-green-body: oklch(23.97% 0.0152 174.74);

    --lch-blue: 66.79% 0.1321 248.82;
    --color-blue-dark: oklch(84.55% 0.0762 246.06);
    --color-blue-light: oklch(52.11% 0.0848 257.2);
    --color-blue-lighter: oklch(41.56% 0.0504 256.16);
    --color-blue-lightest: oklch(34.6% 0.0332 257.16);
    --color-blue-canvas: oklch(29.4% 0.0247 259.21);
    --color-blue-body: oklch(24.23% 0.0234 259.16);

    --lch-purple: 67.95% 0.1338 298.61;
    --color-purple-dark: oklch(85.28% 0.077 299.02);
    --color-purple-light: oklch(52.66% 0.0813 303.99);
    --color-purple-lighter: oklch(41.89% 0.0462 303.42);
    --color-purple-lightest: oklch(34.84% 0.0327 304.64);
    --color-purple-canvas: oklch(29.58% 0.0246 306.12);
    --color-purple-body: oklch(24.35% 0.0191 306.48);
    --color-purple: oklch(var(--lch-purple));
  }

  /* Abstractions */
  --color-canvas: oklch(var(--lch-white));
  --color-body: var(--color-ink-body);

  --color-text: var(--color-ink);
  --color-text-subtle: var(--color-ink-medium);
  --color-text-inverted: oklch(var(--lch-ink-inverted));
  --color-text-inverted-subtle: oklch(var(--lch-ink-inverted) / 80%);
  --color-link: var(--color-blue);

  --color-positive: var(--color-green);
  --color-positive-light: var(--color-green-light);
  --color-positive-lighter: var(--color-green-lighter);
  --color-warning: var(--color-orange);
  --color-warning-light: var(--color-orange-light);
  --color-warning-lighter: var(--color-orange-lighter);
  --color-negative: var(--color-red);
  --color-negative-light: var(--color-red-light);
  --color-negative-lighter: var(--color-red-lighter);

  --color-selected: var(--color-blue-lighter);
  --color-selected-dark: var(--color-blue-light);
  --color-marker: var(--color-orange);
  --color-notification: var(--color-orange);

  --tint-ink-80: oklch(var(--lch-ink) / 80%);
}