/* The one tokens file (FR-UX-01). Everything else reads var(--dp-…); JS reads durations through
   tokens.js. Colour tokens are hex literals or var() of another token (the contrast lint parses them). */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Oswald";
  src: url("/fonts/oswald.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: light;

  /* neutral scale */
  --dp-n-0: #ffffff;
  --dp-n-50: #f5f7fa;
  --dp-n-100: #eaedf2;
  --dp-n-200: #d7dce4;
  --dp-n-300: #b9c1cd;
  --dp-n-400: #8d97a7;
  --dp-n-500: #677285;
  --dp-n-600: #4b5567;
  --dp-n-700: #354050;
  --dp-n-800: #222a36;
  --dp-n-900: #141a23;
  --dp-n-950: #0a0d13;

  /* surfaces and text */
  --dp-bg: var(--dp-n-50);
  --dp-surface: var(--dp-n-0);
  --dp-surface-raised: var(--dp-n-0);
  --dp-border: var(--dp-n-200);
  --dp-border-strong: var(--dp-n-500);
  --dp-text: var(--dp-n-900);
  --dp-text-muted: var(--dp-n-600);
  --dp-focus: #1d4ed8;

  /* the one platform accent */
  --dp-accent: #1d4ed8;
  --dp-accent-text: #1d4ed8;
  --dp-on-accent: var(--dp-n-0);

  /* status */
  --dp-success-bg: #e3f4e8;
  --dp-success-fg: #17602d;
  --dp-warning-bg: #fdf1d3;
  --dp-warning-fg: #774500;
  --dp-danger-bg: #fde7e6;
  --dp-danger-fg: #b0241a;
  --dp-info-bg: #e4ecfc;
  --dp-info-fg: #1c46b8;

  /* identity slots: neutral defaults, set only by identity/colour.applySlots(el, colours) */
  --dp-slot-primary: var(--dp-n-700);
  --dp-slot-primary-text: var(--dp-n-0);
  --dp-slot-accent: var(--dp-accent);
  --dp-slot-accent-text: var(--dp-on-accent);

  /* type */
  --dp-font-text: "Inter", system-ui, sans-serif;
  --dp-font-display: "Oswald", "Inter", system-ui, sans-serif;
  --dp-text-xs: 0.75rem;
  --dp-text-s: 0.875rem;
  --dp-text-m: 1rem;
  --dp-text-l: 1.125rem;
  --dp-text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --dp-text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --dp-text-3xl: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
  --dp-num-l: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --dp-num-xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --dp-leading: 1.5;
  --dp-leading-tight: 1.2;

  /* space */
  --dp-space-1: 4px;
  --dp-space-2: 8px;
  --dp-space-3: 12px;
  --dp-space-4: 16px;
  --dp-space-5: 24px;
  --dp-space-6: 32px;
  --dp-space-7: 48px;
  --dp-space-8: 64px;

  /* radii */
  --dp-radius-s: 6px;
  --dp-radius-m: 10px;
  --dp-radius-l: 16px;
  --dp-radius-pill: 999px;

  /* elevation */
  --dp-elev-1: 0 1px 2px rgba(10, 13, 19, 0.06), 0 1px 3px rgba(10, 13, 19, 0.08);
  --dp-elev-2: 0 2px 6px rgba(10, 13, 19, 0.08), 0 6px 16px rgba(10, 13, 19, 0.08);
  --dp-elev-3: 0 8px 24px rgba(10, 13, 19, 0.14), 0 16px 48px rgba(10, 13, 19, 0.12);
  --dp-scrim: rgba(10, 13, 19, 0.45);

  /* motion */
  --dp-dur-micro: 160ms;
  --dp-dur-transition: 240ms;
  --dp-dur-celebrate: 1200ms;
  --dp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dp-ease-enter: cubic-bezier(0, 0, 0, 1);
  --dp-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  /* travel distances; reduced motion sets them to zero so only opacity changes remain (FR-UX-06) */
  --dp-shift: 24px;
  --dp-shift-full: 100%;
  --dp-pulse: 0.4;

  /* interaction */
  --dp-press-hold: 250ms;
  --dp-undo-window: 5000ms;
  --dp-tick: 1000ms;
  --dp-tap-min: 44px;
  --dp-tap-gap: 8px;

  /* layout */
  --dp-content-max: 1200px;
  --dp-safe-top: env(safe-area-inset-top, 0px);
  --dp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dp-safe-left: env(safe-area-inset-left, 0px);
  --dp-safe-right: env(safe-area-inset-right, 0px);
  --dp-header-h: 56px;
  --dp-thumbbar-h: 68px;
  --dp-tabbar-h: 60px;
  --dp-side-w: 220px;

  /* values set at run time through el.style.setProperty (CSSOM); defaults here */
  --dp-tip-x: 0px;
  --dp-tip-y: 0px;
  --dp-sheet-drag: 0px;
}

:root[data-theme=dark] {
  color-scheme: dark;
  --dp-bg: var(--dp-n-950);
  --dp-surface: var(--dp-n-900);
  --dp-surface-raised: var(--dp-n-800);
  --dp-border: var(--dp-n-700);
  --dp-border-strong: var(--dp-n-400);
  --dp-text: var(--dp-n-50);
  --dp-text-muted: var(--dp-n-300);
  --dp-focus: #6ea0ff;
  --dp-accent: #6ea0ff;
  --dp-accent-text: #93b8ff;
  --dp-on-accent: var(--dp-n-950);
  --dp-success-bg: #0f2d1a;
  --dp-success-fg: #7fdc9c;
  --dp-warning-bg: #35260a;
  --dp-warning-fg: #f6c85f;
  --dp-danger-bg: #3a1311;
  --dp-danger-fg: #ffa39b;
  --dp-info-bg: #12244a;
  --dp-info-fg: #9dbdff;
  --dp-slot-primary: var(--dp-n-300);
  --dp-slot-primary-text: var(--dp-n-950);
  --dp-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dp-elev-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --dp-elev-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  --dp-scrim: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme=system] {
    color-scheme: dark;
    --dp-bg: var(--dp-n-950);
    --dp-surface: var(--dp-n-900);
    --dp-surface-raised: var(--dp-n-800);
    --dp-border: var(--dp-n-700);
    --dp-border-strong: var(--dp-n-400);
    --dp-text: var(--dp-n-50);
    --dp-text-muted: var(--dp-n-300);
    --dp-focus: #6ea0ff;
    --dp-accent: #6ea0ff;
    --dp-accent-text: #93b8ff;
    --dp-on-accent: var(--dp-n-950);
    --dp-success-bg: #0f2d1a;
    --dp-success-fg: #7fdc9c;
    --dp-warning-bg: #35260a;
    --dp-warning-fg: #f6c85f;
    --dp-danger-bg: #3a1311;
    --dp-danger-fg: #ffa39b;
    --dp-info-bg: #12244a;
    --dp-info-fg: #9dbdff;
    --dp-slot-primary: var(--dp-n-300);
    --dp-slot-primary-text: var(--dp-n-950);
    --dp-elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --dp-elev-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --dp-elev-3: 0 12px 32px rgba(0, 0, 0, 0.55);
    --dp-scrim: rgba(0, 0, 0, 0.6);
  }
}

/* Reduced motion (the user's setting or the system's): no travel, opacity only (FR-UX-06). */
:root[data-motion=reduced] {
  --dp-shift: 0px;
  --dp-shift-full: 0px;
  --dp-pulse: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dp-shift: 0px;
    --dp-shift-full: 0px;
    --dp-pulse: 1;
  }
}

/* Per-element runtime variables: declared here so every `--dp-*` name has one home, set by
   `ui/dnd.js` (ghost geometry, room made for a drop) and `ui/identity` (swatch colours). */
:root {
  --dp-ghost-w: 0px;
  --dp-ghost-x: 0px;
  --dp-ghost-y: 0px;
  --dp-room: 0px;
  --dp-swatch: var(--dp-surface);
  --dp-swatch-text: var(--dp-text);
}