/*
 * D9Commerce — brand design tokens ("Aurora").
 *
 * The single source of truth for the rebrand: every surface (app shell,
 * module pages, marketing site, auth pages) reads these. Legacy token
 * families (--cr-*, --mk-*, --ip-*, --bn-*, style.css names) are re-pointed
 * at these in d9-theme.css rather than rewritten in place.
 *
 * Logo: /assets/img/logo-mark.svg (tile), logo-full.svg (ink wordmark),
 * logo-full-light.svg (for dark surfaces). Gradient direction is always
 * 135deg cyan → indigo → violet, matching the mark.
 */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand hues (from the mark) */
  --d9-cyan: #22D3EE;
  --d9-sky: #38BDF8;
  --d9-indigo: #6366F1;
  --d9-indigo-600: #4F46E5;
  --d9-indigo-700: #4338CA;
  --d9-violet: #8B5CF6;
  --d9-purple: #A855F7;
  --d9-pink: #EC4899;

  --d9-grad: linear-gradient(135deg, #22D3EE 0%, #6366F1 52%, #A855F7 100%);
  --d9-grad-text: linear-gradient(120deg, #06B6D4 0%, #6366F1 50%, #A855F7 100%);
  --d9-grad-soft: linear-gradient(135deg, rgba(34, 211, 238, .12), rgba(99, 102, 241, .12) 52%, rgba(168, 85, 247, .12));
  --d9-primary: #5B5CF0;          /* buttons, links, focus */
  --d9-primary-hover: #4F46E5;
  --d9-primary-soft: #EEF0FF;
  --d9-primary-ring: rgba(99, 102, 241, .35);

  /* Neutrals (cool, slightly indigo-tinted) */
  --d9-ink: #0B1020;
  --d9-ink-2: #2A3350;
  --d9-muted: #66708C;
  --d9-faint: #98A0B8;
  --d9-bg: #F5F6FB;
  --d9-surface: #FFFFFF;
  --d9-surface-2: #F8F9FD;
  --d9-line: #E5E8F2;
  --d9-line-strong: #D3D8E8;

  /* Status */
  --d9-success: #10B981;
  --d9-success-soft: #E7F8F1;
  --d9-warning: #F59E0B;
  --d9-warning-soft: #FEF5E2;
  --d9-danger: #EF4444;
  --d9-danger-soft: #FDECEC;
  --d9-info: #0EA5E9;
  --d9-info-soft: #E6F6FD;

  /* Shape & depth */
  --d9-radius-sm: 8px;
  --d9-radius: 12px;
  --d9-radius-lg: 16px;
  --d9-radius-xl: 22px;
  --d9-shadow-sm: 0 1px 2px rgba(16, 24, 64, .06), 0 1px 1px rgba(16, 24, 64, .03);
  --d9-shadow: 0 6px 16px -6px rgba(16, 24, 64, .12), 0 2px 4px rgba(16, 24, 64, .04);
  --d9-shadow-lg: 0 24px 48px -18px rgba(16, 24, 64, .25), 0 8px 16px -8px rgba(16, 24, 64, .10);
  --d9-glow: 0 10px 28px -8px rgba(99, 102, 241, .55);

  /* Motion */
  --d9-ease: cubic-bezier(.22, 1, .36, 1);       /* ease-out-quint: UI default */
  --d9-spring: cubic-bezier(.34, 1.56, .64, 1);  /* playful overshoot, small elements only */
  --d9-fast: .15s;
  --d9-dur: .24s;
  --d9-slow: .5s;

  /* Type */
  --d9-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --d9-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Dark: the app toggles body.dark-mode; public pages follow the OS. */
body.dark-mode {
  --d9-primary: #7C7FF7;
  --d9-primary-hover: #8F92FA;
  --d9-primary-soft: rgba(99, 102, 241, .16);
  --d9-primary-ring: rgba(124, 127, 247, .45);
  --d9-ink: #E8EBF7;
  --d9-ink-2: #C3C9DE;
  --d9-muted: #8D97B5;
  --d9-faint: #5F6A8A;
  --d9-bg: #070B16;
  --d9-surface: #0E1426;
  --d9-surface-2: #121A30;
  --d9-line: #1D2742;
  --d9-line-strong: #2A3658;
  --d9-success-soft: rgba(16, 185, 129, .14);
  --d9-warning-soft: rgba(245, 158, 11, .14);
  --d9-danger-soft: rgba(239, 68, 68, .14);
  --d9-info-soft: rgba(14, 165, 233, .14);
  --d9-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --d9-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .3);
  --d9-shadow-lg: 0 28px 56px -18px rgba(0, 0, 0, .75);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d9-fast: 0s; --d9-dur: 0s; --d9-slow: 0s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}