/* ============================================================
   DESIGN SYSTEM — tokens.css
   Import this in globals.css or any HTML <link> tag.
   ============================================================ */

/* Portal copy: the Google Fonts import is removed (no client IP addresses to Google Fonts; CSP blocks it). Inter falls back to the system font until it is self-hosted. */

/* ---- Light mode (default) --------------------------------- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Surfaces */
  --bg:           #ffffff;
  --bg-subtle:    #fafafa;
  --bg-muted:     #f5f5f5;

  /* Borders */
  --border:        #ebebeb;
  --border-strong: #d4d4d4;

  /* Text */
  --text:        #171717;
  --text-subtle: #525252;
  --text-muted:  #6b6b6b;

  /* Accent — functional states only */
  --accent:    #000000;
  --accent-fg: #ffffff;

  /* Semantic */
  --danger:      #e11d48;
  --danger-bg:   #fff1f2;
  --success:     #16a34a;
  --success-bg:  #f0fdf4;
  --warning:     #d97706;
  --warning-bg:  #fffbeb;

  /* Surface elevation */
  --surface:   var(--bg);
  --surface-2: var(--bg-subtle);

  /* Spacing — 4px base */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 64px;

  /* Border radius */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  /* Motion curves */
  --ease-snappy: 150ms ease-out;
  --ease-smooth: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-reveal: 250ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-dropdown:   30;
  --z-modal:      40;
  --z-command:    50;
  --z-tooltip:    60;
  --z-toast:      9999;

  /* Font weights */
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Type scale */
  --text-display: 36px;
  --text-h1:      28px;
  --text-h2:      22px;
  --text-h3:      16px;
  --text-body:    14px;
  --text-sm:      13px;
  --text-label:   11px;

  /* Gradient motion palette */
  --gradient-core:    linear-gradient(135deg, #1B2FCC, #03EAB3);
  --gradient-arc:     linear-gradient(135deg, #7B4FD0, #2B5FFF, #03EAB3);
  --gradient-sky:     linear-gradient(135deg, #4EA8FF, #03EAB3);
  --gradient-whisper: linear-gradient(135deg, rgba(100,120,255,0.10), rgba(3,234,179,0.06));

  /* Icons for native controls, where an inline SVG can't go.
     Select chevron = .select-chevron drawn as an image, stroke in --text.
     Keep the hex values in sync with that token.
     The check is a mask, so its colour comes from currentColor */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23171717' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Dark mode -------------------------------------------- */
[data-theme="dark"] {
  --bg:           #0f0f0f;
  --bg-subtle:    #1a1a1a;
  --bg-muted:     #222222;
  --border:        #404040;
  --border-strong: #5a5a5a;
  --text:        #fafafa;
  --text-subtle: #a3a3a3;
  --text-muted:  #8a8a8a;
  --accent:    #ffffff;
  --accent-fg: #000000;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30);
  --danger:     #fb7185;
  --danger-bg:  #1f0a0d;
  --success:    #4ade80;
  --success-bg: #052e16;
  --warning:    #fbbf24;
  --warning-bg: #1c1400;
  --surface:   var(--bg-subtle);
  --surface-2: var(--bg-muted);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23fafafa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Keyframe animations ---------------------------------- */

@keyframes btnShimmer {
  from { background-position: -100% center; }
  to   { background-position: 200% center; }
}

@keyframes borderRotate {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

@keyframes skeletonSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes progressSlide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Base reset ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}