/* yourside.ai — design tokens
 * One source of truth for color, type, spacing, radius, shadow.
 * Override via `prefers-color-scheme: dark` at the bottom.
 */

:root {
  /* Surface & text */
  --bg: #FDFAF6;              /* warm paper */
  --surface: #FFFFFF;
  --surface-raised: #F8FAFC;
  --text: #1E293B;            /* slate-800 */
  --text-secondary: #475569;  /* slate-600 */
  --muted: #64748B;           /* slate-500 */
  --border: #E2E8F0;          /* slate-200 */

  /* Accent */
  --accent: #2563EB;          /* blue-600 */
  --accent-soft: #EFF6FF;     /* blue-50 */
  --accent-hover: #1D4ED8;    /* blue-700 */

  /* Semantic */
  --success: #16A34A;
  --success-soft: #DCFCE7;
  --warning: #D97706;
  --warning-soft: #FEF3C7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-display: 2.25rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.375rem;
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Spacing (rem) */
  --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;

  /* Radius */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* Layout */
  --container: 980px;
  --container-wide: 1120px;
  --hero-sticky-top: env(safe-area-inset-top, 0px);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1220;
    --surface: #111A2D;
    --surface-raised: #16233A;
    --text: #ECF2FF;
    --text-secondary: #CBD5E1;
    --muted: #94A3B8;
    --border: #284063;

    --accent: #7FB2FF;
    --accent-soft: rgba(127, 178, 255, 0.12);
    --accent-hover: #5D99FF;

    --success: #4ADE80;
    --success-soft: rgba(74, 222, 128, 0.14);
    --warning: #FBBF24;
    --warning-soft: rgba(251, 191, 36, 0.14);
    --danger: #F87171;
    --danger-soft: rgba(248, 113, 113, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}