/*
 * ToolIndexHub design tokens (Design System v1.3, "the Colour Law").
 *
 * Colour appears on data, or on something you can click. Nowhere else.
 *   1. Chrome is achromatic: true neutral greys, no blue tint.
 *   2. One action colour (ultramarine): buttons, links, focus rings.
 *   3. All remaining colour is data: the Spectrum and the category hues.
 * There is deliberately no token for a decorative coloured surface.
 */
:root {
  /* Action: the only interface colour. If it is this blue, you can click it. */
  --color-primary: #1f1fe8;
  --color-action: #1f1fe8;
  --color-action-strong: #1717b8;

  /* Legacy names, now neutral so nothing decorative can be coloured. */
  --color-secondary: #111113;
  --color-accent: #1f1fe8;

  /* Status colours: only for facts and messages, never decoration. */
  --color-success: #15803d;
  --color-error: #c2261d;
  --color-warning: #b45309;
  --color-info: #1f1fe8;

  /* Achromatic chrome */
  --color-white: #ffffff;
  --color-black: #0a0a0c;
  --color-canvas: #f6f6f5;
  --color-sunken: #ededeb;
  --color-border: #e2e2df;
  --color-ink: #111113;
  --color-band: #0a0a0c;

  --color-gray-50: #f6f6f5;
  --color-gray-100: #ededeb;
  --color-gray-200: #e2e2df;
  --color-gray-300: #cfcfcb;
  --color-gray-400: #a1a19c;
  --color-gray-500: #72726d;
  --color-gray-600: #55554f;
  --color-gray-700: #3d3d39;
  --color-gray-800: #262624;
  --color-gray-900: #111113;

  /* The Spectrum: the brand mark. Rust, amber, green, teal. */
  --spectrum-1: #c2410c;
  --spectrum-2: #d97706;
  --spectrum-3: #16a34a;
  --spectrum-4: #0d9488;
  --spectrum: linear-gradient(
    90deg,
    var(--spectrum-1),
    var(--spectrum-2),
    var(--spectrum-3),
    var(--spectrum-4)
  );

  /* Category hues: data colour, one per category. Dark enough for white text. */
  --hue-1: #1d4ed8;
  --hue-2: #7e22ce;
  --hue-3: #be185d;
  --hue-4: #b91c1c;
  --hue-5: #c2410c;
  --hue-6: #a16207;
  --hue-7: #15803d;
  --hue-8: #0f766e;
  --hue-9: #0369a1;
  --hue-10: #4d7c0f;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4.5rem;

  /* Font sizes */
  --font-size-h1: 3rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.875rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-tiny: 0.75rem;

  /* Font families */
  --font-family-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Radius: engineered, not bubbly */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-full: 9999px;

  /* Shadows: neutral, low */
  --shadow-sm: 0 1px 2px rgb(17 17 19 / 0.05);
  --shadow-md: 0 2px 6px rgb(17 17 19 / 0.07);
  --shadow-lg: 0 8px 20px rgb(17 17 19 / 0.08);
  --shadow-xl: 0 16px 32px rgb(17 17 19 / 0.1);

  /* Motion (v1.3): three easings, five durations. Nothing else is allowed. */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;
  --t-reveal: 600ms;
  --t-morph: 680ms;

  /* Legacy transition names mapped onto the motion tokens */
  --transition-fast: var(--t-fast) var(--e-out);
  --transition-normal: var(--t-base) var(--e-out);
  --transition-slow: var(--t-slow) var(--e-out);

  /* Z-index */
  --z-index-dropdown: 1000;
  --z-index-modal: 1100;
  --z-index-tooltip: 1200;
  --z-index-toast: 1300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-reveal: 0ms;
    --t-morph: 0ms;
  }
}