/* Propshaft links stylesheets in path order, so this file declares the layer order first. */
@layer reset, base, components, modules, utilities;

:root {
  /* Spacing */
  --inline-space: 1rem;
  --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: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xx-small: 0.625rem;
  --text-x-small: 0.75rem;
  --text-small: 0.875rem;
  --text-normal: 1rem;
  --text-medium: 1.125rem;
  --text-large: 1.25rem;
  --text-x-large: 1.5rem;

  /* Shape */
  --radius-small: 0.25rem;
  --radius: 0.5rem;
  --radius-large: 0.75rem;
  --radius-pill: 99rem;

  --border: 1px solid var(--color-line);
  --shadow: 0 10px 15px -3px oklch(0% 0 0 / 10%), 0 4px 6px -4px oklch(0% 0 0 / 10%);
  --shadow-large: 0 25px 50px -12px oklch(0% 0 0 / 25%);

  --focus-ring: 2px solid var(--color-accent);
  --focus-ring-soft: 2px solid color-mix(in oklch, var(--color-sky) 30%, transparent);
  --transition: 150ms ease;

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

  /* Neutrals */
  --color-ink: oklch(21% 0.034 264.665);
  --color-ink-dark: oklch(37.3% 0.034 259.733);
  --color-ink-medium: oklch(55.1% 0.027 264.364);
  --color-ink-light: oklch(70.7% 0.022 261.325);
  --color-ink-lighter: oklch(87.2% 0.01 258.338);
  --color-line: oklch(92.8% 0.006 264.531);
  --color-line-light: oklch(96.7% 0.003 264.542);
  --color-canvas: oklch(98.5% 0.002 247.839);
  --color-surface: oklch(100% 0 0);

  /* Hues: one solid stop each; tints and shades come from color-mix() */
  --color-red: oklch(57.7% 0.245 27.325);
  --color-rose: oklch(58.6% 0.253 17.585);
  --color-orange: oklch(64.6% 0.222 41.116);
  --color-amber: oklch(66.6% 0.179 58.318);
  --color-emerald: oklch(59.6% 0.145 163.225);
  --color-sky: oklch(58.8% 0.158 241.966);
  --color-blue: oklch(54.6% 0.245 262.881);
  --color-indigo: oklch(51.1% 0.262 276.966);
  --color-violet: oklch(54.1% 0.281 293.009);
  --color-purple: oklch(55.8% 0.288 302.321);
  --color-slate: oklch(55.4% 0.046 257.417);
  --color-yellow: oklch(68.1% 0.162 75.834);
  --color-lime: oklch(64.8% 0.2 131.684);
  --color-green: oklch(62.7% 0.194 149.214);
  --color-teal: oklch(60% 0.118 184.704);
  --color-cyan: oklch(60.9% 0.126 221.723);
  --color-fuchsia: oklch(59.1% 0.293 322.896);
  --color-pink: oklch(59.2% 0.249 0.584);
  --color-denim: oklch(58.9% 0.122 256.3);
  --color-gray: var(--color-ink-medium);

  /* Meaning */
  --color-accent: var(--color-red);
  --color-positive: var(--color-emerald);
  --color-warning: var(--color-amber);
  --color-negative: var(--color-red);
  --color-info: var(--color-blue);

  /* Storefront: the brand's navy and sky, matched stop for stop to what customers already see */
  --storefront-width: 72rem;
  --storefront-padding: 1rem;

  --color-navy: oklch(28.2% 0.091 267.935);
  --color-navy-light: oklch(37.9% 0.146 265.522);
  --color-blue-wash: oklch(88.2% 0.059 254.128);
  --color-sky-wash: oklch(97.7% 0.013 236.62);
  --color-sky-soft: oklch(95.1% 0.026 236.824);
  --color-sky-pale: oklch(90.1% 0.058 230.902);
  --color-sky-light: oklch(82.8% 0.111 230.318);
  --color-sky-bright: oklch(68.5% 0.169 237.323);
  --color-sky-dark: oklch(50% 0.134 242.749);
  --color-sky-darker: oklch(44.3% 0.11 240.79);
  --color-red-dark: oklch(50.5% 0.213 27.518);
  --color-ink-soft: oklch(44.6% 0.03 256.802);
  --color-stone: oklch(98.5% 0.001 106.423);

  --text-2x-large: 1.875rem;
  --text-3x-large: 2.25rem;
  --text-4x-large: 3rem;
  --text-5x-large: 3.75rem;

  --radius-x-large: 1rem;
  --shadow-small: 0 1px 3px 0 oklch(0% 0 0 / 10%), 0 1px 2px -1px oklch(0% 0 0 / 10%);
  --shadow-medium: 0 4px 6px -1px oklch(0% 0 0 / 10%), 0 2px 4px -2px oklch(0% 0 0 / 10%);
  --shadow-x-large: 0 20px 25px -5px oklch(0% 0 0 / 10%), 0 8px 10px -6px oklch(0% 0 0 / 10%);

  @media (width >= 640px) {
    --storefront-padding: 1.5rem;
  }

  @media (width >= 1024px) {
    --storefront-padding: 2rem;
  }
}