@layer reset, base, components, modules, utilities, native, platform;

@layer base {
  :root {
    color-scheme: light;

    /* Insets */
    --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
    --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
    --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
    --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));

    /* Spacing */
    --inline-space: 1ch;
    --inline-space-half: calc(var(--inline-space) / 2);
    --inline-space-double: calc(var(--inline-space) * 2);
    --block-space: 1rem;
    --block-space-half: calc(var(--block-space) / 2);
    --block-space-double: calc(var(--block-space) * 2);

    /* Text */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

    --text-xx-small: 0.6875rem;
    --text-x-small: 0.75rem;
    --text-small: 0.875rem;
    --text-normal: 1rem;
    --text-medium: 1.125rem;
    --text-large: 1.5rem;
    --text-x-large: 1.875rem;
    --text-xx-large: 2.5rem;

    /* Borders */
    --border: 1px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);
    --border-radius: 0.375rem;
    --border-radius-large: 0.5rem;
    --border-radius-pill: 999px;

    /* Shadows */
    --shadow-alpha: 5%;
    --shadow-alpha-strong: 10%;
    --shadow-small: 0 0.0625em 0.125em oklch(var(--lch-black) / var(--shadow-alpha));
    --shadow: 0 0 0 1px oklch(var(--lch-black) / var(--shadow-alpha)),
      0 0.2em 0.2em oklch(var(--lch-black) / var(--shadow-alpha)),
      0 0.4em 0.4em oklch(var(--lch-black) / var(--shadow-alpha));
    --shadow-large: 0 0.25em 0.375em -0.0625em oklch(var(--lch-black) / var(--shadow-alpha-strong)),
      0 0.125em 0.25em -0.125em oklch(var(--lch-black) / var(--shadow-alpha-strong));

    /* Components */
    --btn-size: 2.65em;
    --icon-size: 1.15em;
    --nav-height: 4rem;

    /* Focus rings */
    --focus-ring-color: var(--color-link);
    --focus-ring-offset: 2px;
    --focus-ring-size: 2px;
    --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

    /* Easing */
    --duration-fast: 150ms;
    --duration: 200ms;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);

    /* Layout */
    --main-padding: clamp(var(--inline-space), 3vw, var(--inline-space-double));
    --main-width: 64rem;

    /* Z-index */
    --z-stretched-link: 1;
    --z-above-stretched-link: 2;
    --z-popup: 10;
    --z-nav: 20;

    /* Colors: tier 1, raw OKLCH channels */
    --lch-black: 0% 0 0;
    --lch-white: 100% 0 0;

    --lch-ink-darkest: 26% 0.05 264;
    --lch-ink-darker: 40% 0.026 262;
    --lch-ink-dark: 56% 0.014 260;
    --lch-ink-medium: 66% 0.008 258;
    --lch-ink-light: 84% 0.005 256;
    --lch-ink-lighter: 92% 0.003 254;
    --lch-ink-lightest: 96% 0.002 252;

    --lch-canvas: 100% 0 0;
    --lch-surface: 100% 0 0;
    --lch-surface-subtle: 96% 0.002 252;

    --lch-border: 84% 0.005 256;
    --lch-border-strong: 66% 0.008 258;

    --lch-blue-darker: 32% 0.14 263;
    --lch-blue-dark: 40% 0.166 262;
    --lch-blue-medium: 57% 0.19 260;
    --lch-blue-light: 90% 0.05 258;

    --lch-red-dark: 45% 0.17 32;
    --lch-red-medium: 59% 0.19 38;
    --lch-red-light: 90% 0.05 30;

    --lch-green-dark: 45% 0.13 150;
    --lch-green-medium: 60% 0.15 150;
    --lch-green-light: 90% 0.05 150;

    --lch-yellow-medium: 82% 0.16 88;
    --lch-yellow-light: 93% 0.09 92;

    /* Colors: tier 2, named */
    --color-canvas: oklch(var(--lch-canvas));
    --color-surface: oklch(var(--lch-surface));
    --color-surface-subtle: oklch(var(--lch-surface-subtle));

    --color-ink: oklch(var(--lch-ink-darkest));
    --color-ink-subtle: oklch(var(--lch-ink-darker));
    --color-ink-muted: oklch(var(--lch-ink-dark));
    --color-ink-inverted: oklch(var(--lch-white));

    --color-border: oklch(var(--lch-border));
    --color-border-strong: oklch(var(--lch-border-strong));

    --color-link: oklch(var(--lch-blue-medium));
    --color-link-dark: oklch(var(--lch-blue-dark));
    --color-link-darker: oklch(var(--lch-blue-darker));

    --color-negative: oklch(var(--lch-red-medium));
    --color-positive: oklch(var(--lch-green-medium));
    --color-warning: oklch(var(--lch-yellow-medium));
    --color-highlight: oklch(var(--lch-yellow-light));
    --color-marker: oklch(var(--lch-red-dark));

    --color-selected-light: oklch(var(--lch-blue-medium) / 12%);
    --color-selected: oklch(var(--lch-blue-medium) / 25%);
    --color-selected-dark: oklch(var(--lch-blue-medium) / 45%);

    /* The type scale steps up on phones so small text stays legible */
    @media (max-width: 639px) {
      --text-xx-small: 0.75rem;
      --text-x-small: 0.8125rem;
      --text-small: 0.9375rem;
      --text-medium: 1.1875rem;
      --text-large: 1.625rem;
      --text-x-large: 2rem;
    }
  }

  /* Dark mode redefines tier 1 only, so every named color follows for free
  /* -------------------------------------------------------------------------- */

  html[data-theme="dark"] {
    color-scheme: dark;

    --shadow-alpha: 30%;
    --shadow-alpha-strong: 40%;

    --lch-ink-darkest: 96% 0.002 252;
    --lch-ink-darker: 84% 0.005 256;
    --lch-ink-dark: 72% 0.01 258;
    --lch-ink-medium: 60% 0.014 258;
    --lch-ink-light: 46% 0.02 260;
    --lch-ink-lighter: 34% 0.02 262;
    --lch-ink-lightest: 28% 0.02 264;

    --lch-canvas: 22% 0.02 264;
    --lch-surface: 26% 0.02 264;
    --lch-surface-subtle: 30% 0.02 264;

    --lch-border: 38% 0.02 262;
    --lch-border-strong: 50% 0.02 262;

    --lch-blue-darker: 86% 0.1 254;
    --lch-blue-dark: 78% 0.13 256;
    --lch-blue-medium: 70% 0.16 258;
    --lch-blue-light: 34% 0.09 260;

    --lch-red-dark: 82% 0.11 30;
    --lch-red-medium: 70% 0.17 30;
    --lch-red-light: 32% 0.09 30;

    --lch-green-dark: 82% 0.11 152;
    --lch-green-medium: 72% 0.15 152;
    --lch-green-light: 32% 0.08 152;

    --lch-yellow-medium: 86% 0.15 90;
    --lch-yellow-light: 40% 0.09 92;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
      color-scheme: dark;

      --shadow-alpha: 30%;
      --shadow-alpha-strong: 40%;

      --lch-ink-darkest: 96% 0.002 252;
      --lch-ink-darker: 84% 0.005 256;
      --lch-ink-dark: 72% 0.01 258;
      --lch-ink-medium: 60% 0.014 258;
      --lch-ink-light: 46% 0.02 260;
      --lch-ink-lighter: 34% 0.02 262;
      --lch-ink-lightest: 28% 0.02 264;

      --lch-canvas: 22% 0.02 264;
      --lch-surface: 26% 0.02 264;
      --lch-surface-subtle: 30% 0.02 264;

      --lch-border: 38% 0.02 262;
      --lch-border-strong: 50% 0.02 262;

      --lch-blue-darker: 86% 0.1 254;
      --lch-blue-dark: 78% 0.13 256;
      --lch-blue-medium: 70% 0.16 258;
      --lch-blue-light: 34% 0.09 260;

      --lch-red-dark: 82% 0.11 30;
      --lch-red-medium: 70% 0.17 30;
      --lch-red-light: 32% 0.09 30;

      --lch-green-dark: 82% 0.11 152;
      --lch-green-medium: 72% 0.15 152;
      --lch-green-light: 32% 0.08 152;

      --lch-yellow-medium: 86% 0.15 90;
      --lch-yellow-light: 40% 0.09 92;
    }
  }
}