/* Colours, typography, spacing, width, radius, shadow and z-index variables */

:root {
  color-scheme: dark;

  /* Core dark environment */
  --nk-color-black: #06040b;
  --nk-color-black-purple: #0d0718;
  --nk-color-deep-violet: #160c2a;
  --nk-color-surface-dark: #181222;
  --nk-color-surface-raised: #21192e;

  /* Light editorial environment */
  --nk-color-white: #ffffff;
  --nk-color-off-white: #f6f4f8;
  --nk-color-light-grey: #ded9e5;
  --nk-color-charcoal: #19161f;
  --nk-color-copy-grey: #625d69;

  /* Brand energy */
  --nk-color-violet: #8b5cff;
  --nk-color-violet-bright: #ad7cff;
  --nk-color-violet-soft: rgba(139, 92, 255, 0.16);
  --nk-color-blue: #4f7fff;
  --nk-color-magenta: #e84ac8;

  /* Dark-mode text */
  --nk-color-text: #ffffff;
  --nk-color-text-muted: #c2bdca;
  --nk-color-text-faint: #8c8497;

  /* Functional colours */
  --nk-color-success: #3bcf85;
  --nk-color-warning: #f4b84a;
  --nk-color-danger: #f06472;
  --nk-color-info: #65a0ff;

  /* Borders */
  --nk-color-border: rgba(255, 255, 255, 0.12);
  --nk-color-border-strong: rgba(255, 255, 255, 0.24);

  /* Typography */
  --nk-font-sans:
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  --nk-font-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  --nk-text-xs: 0.75rem;
  --nk-text-sm: 0.875rem;
  --nk-text-base: 1rem;
  --nk-text-lg: 1.125rem;
  --nk-text-xl: 1.375rem;

  /* Spacing */
  --nk-space-1: 0.25rem;
  --nk-space-2: 0.5rem;
  --nk-space-3: 0.75rem;
  --nk-space-4: 1rem;
  --nk-space-5: 1.5rem;
  --nk-space-6: 2rem;
  --nk-space-7: 3rem;
  --nk-space-8: 4rem;
  --nk-space-9: 6rem;

  /* Layout */
  --nk-width-reading: 48rem;
  --nk-width-content: 76rem;
  --nk-width-wide: 90rem;
  --nk-page-gutter: clamp(1rem, 4vw, 4rem);
  --nk-header-height: 5rem;

  /* Shape */
  --nk-radius-sm: 0.25rem;
  --nk-radius-md: 0.5rem;
  --nk-radius-lg: 0.875rem;

  /* Shadows */
  --nk-shadow-header: 0 1rem 3rem rgba(0, 0, 0, 0.24);
  --nk-shadow-overlay: 0 2rem 5rem rgba(0, 0, 0, 0.4);

  /* Motion */
  --nk-duration-fast: 140ms;
  --nk-duration-medium: 240ms;
  --nk-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layering */
  --nk-z-header: 1000;
  --nk-z-mega-menu: 1100;
  --nk-z-mobile-menu: 1200;
  --nk-z-koop: 1300;

  /* Material bridge */
  --md-text-font: var(--nk-font-sans);
  --md-code-font: var(--nk-font-mono);
  --md-primary-fg-color: var(--nk-color-black-purple);
  --md-primary-bg-color: var(--nk-color-white);
  --md-accent-fg-color: var(--nk-color-violet-bright);
  --md-default-bg-color: var(--nk-color-black);
  --md-default-fg-color: var(--nk-color-text);
  --md-typeset-color: var(--nk-color-text);
  --md-typeset-a-color: var(--nk-color-violet-bright);
  --md-code-bg-color: var(--nk-color-surface-raised);
  --md-code-fg-color: var(--nk-color-text);

  /* Temporary legacy aliases */
  --nk-bg: var(--nk-color-black);
  --nk-surface: var(--nk-color-surface-dark);
  --nk-surface-2: var(--nk-color-surface-raised);
  --nk-surface-3: var(--nk-color-surface-raised);
  --nk-border: var(--nk-color-border);
  --nk-border-strong: var(--nk-color-border-strong);
  --nk-accent: var(--nk-color-violet);
  --nk-accent-soft: var(--nk-color-violet-bright);
  --nk-accent-panel: var(--nk-color-violet-soft);
  --nk-text: var(--nk-color-text);
  --nk-muted: var(--nk-color-text-muted);
  --nk-faint: var(--nk-color-text-faint);
  --nk-success: var(--nk-color-success);
  --nk-warning: var(--nk-color-warning);
  --nk-danger: var(--nk-color-danger);
  --nk-info: var(--nk-color-info);
  --nk-radius: var(--nk-radius-sm);
  --nk-radius-lg: var(--nk-radius-lg);
  --nk-max-width: var(--nk-width-wide);
}