/* Reyes — design tokens (source of truth for every rendered design).
   Dark-only. Blend of the Reyes Figma app (calm dark base) + Polygraph (technical accent). */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Canvas & surfaces (low -> high elevation) */
  --bg:            #0B0C11;
  --bg-subtle:     #101218;
  --surface:       #161922;
  --surface-2:     #1C2030;
  --surface-glass: rgba(22, 25, 34, 0.72);

  /* Borders (hairlines, not lines) */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text:        #F4F6FB;
  --text-muted:  #A2A7B6;
  --text-faint:  #6B7080;  /* large / secondary only */
  --on-accent:   #0B0C11;  /* dark text sits ON the bright accent */

  /* Accent — indigo-periwinkle "starlight" (ONE accent only) */
  --accent:        #7B8CF7;
  --accent-bright: #9CA8FF;
  --accent-deep:   #4A57C9;
  --violet:        #9B7BF0;  /* gradient partner only */
  --spark:         #CFE0FF;  /* tiny star highlights, sparingly */

  /* Semantic (muted, calm — never alarm-bright) */
  --success: #5FD3A3;
  --warning: #E7C173;
  --danger:  #EF8A82;

  /* Signature gradients */
  --grad-accent:  linear-gradient(135deg, #6B7CF5 0%, #9B7BF0 100%);
  --grad-ambient: radial-gradient(60% 50% at 50% 30%,
                    rgba(123,140,247,0.20) 0%,
                    rgba(155,123,240,0.10) 45%,
                    rgba(11,12,17,0) 75%);

  /* Elevation (soft shadow + glow, not hard drops) */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:   0 24px 64px rgba(0,0,0,0.45);
  --glow-accent: 0 0 40px rgba(123,140,247,0.35);
  --blur-glass:  saturate(140%) blur(20px);

  /* Spacing (4px scale) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* Radii */
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  /* Structure */
  --container-max: 1120px;
  --gutter: 24px;

  /* Breakpoints (reference) */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Geist Mono", monospace;
}