/* Shared DME brand foundation. Load fonts.css first, then this file.
   Concepts may extend semantic tokens; keep the brand palette unchanged.
   Fluid type runs from 390px to 1920px with a 16px root reference.
   CSS variables cannot be used in native @media conditions: use the literal
   breakpoint values below. The custom properties also expose them to JS. */
:root {
  --color-ink: #1E1D20;
  --color-purple: #6600FF;
  --color-teal: #33FFDD;
  --color-pink: #FF0066;
  --color-cyan: #00BBFF; /* Rare accent: charts only. */
  --color-grey-100: #F3F3F3;
  --color-grey-200: #E8E8E8;
  --color-grey-300: #D0CFD3;
  --color-white: #FFFFFF;

  --color-background: var(--color-ink);
  --color-text: var(--color-white);
  --color-text-muted: var(--color-grey-300);
  --color-surface-light: var(--color-grey-100);
  --color-text-on-light: var(--color-ink);
  --color-action: var(--color-purple);
  --color-text-on-action: var(--color-white);
  --color-focus: var(--color-teal);

  --font-family: "Gilroy", "Manrope", system-ui;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Min/max pixels: 12/14, 14/16, 16/20, 20/24, 24/32,
     32/48, 40/64, 48/96 and 64/144, respectively. */
  --font-size-xs: clamp(0.75rem, calc(0.71814rem + 0.13072vw), 0.875rem);
  --font-size-sm: clamp(0.875rem, calc(0.84314rem + 0.13072vw), 1rem);
  --font-size-base: clamp(1rem, calc(0.93627rem + 0.26144vw), 1.25rem);
  --font-size-lg: clamp(1.25rem, calc(1.18627rem + 0.26144vw), 1.5rem);
  --font-size-xl: clamp(1.5rem, calc(1.37255rem + 0.52288vw), 2rem);
  --font-size-2xl: clamp(2rem, calc(1.74510rem + 1.04575vw), 3rem);
  --font-size-3xl: clamp(2.5rem, calc(2.11765rem + 1.56863vw), 4rem);
  --font-size-4xl: clamp(3rem, calc(2.23529rem + 3.13725vw), 6rem);
  --font-size-display: clamp(4rem, calc(2.72549rem + 5.22876vw), 9rem);
  --line-height-display: 0.95;
  --line-height-heading: 1.1;
  --line-height-body: 1.5;
  --line-height-label: 1.25;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-label: 0.08em;

  /* 4pt spacing: 1 unit = 4px at the default 16px root size. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  --radius-sm: var(--space-1);
  --radius-md: var(--space-2);
  --radius-lg: var(--space-5);
  --radius-pill: 9999px;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-normal: 240ms;
  --duration-slow: 480ms;
  --duration-scene: 800ms;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-tooltip: 400;

  --breakpoint-sm: 390px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1920px;
  --container-max: 120rem;
  --gutter: var(--space-4);
}

@media (min-width: 390px) {
  :root { --gutter: var(--space-6); }
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-8); }
}

@media (min-width: 1280px) {
  :root { --gutter: var(--space-12); }
}

@media (min-width: 1920px) {
  :root { --gutter: var(--space-16); }
}

/* Consumers still provide static alternatives for scroll/pin/canvas motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-scene: 0.01ms;
  }
}