/* ============================================================
   shadcn design system — tokens
   Font: Manrope · Accent: blue (#3b82f6) · Radius: 0.75rem
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
@import url("components.css");

:root {
  /* ----- Surfaces & text ----- */
  --background:            #ffffff;
  --foreground:            #0a0a0b;
  --card:                  #ffffff;
  --card-foreground:       #0a0a0b;
  --popover:               #ffffff;
  --popover-foreground:    #0a0a0b;

  /* ----- Brand / accent ----- */
  --primary:               #818CF8;   /* indigo */
  --primary-foreground:    #18181b;   /* dark text on primary */
  --secondary:             #f4f4f5;
  --secondary-foreground:  #18181b;
  --muted:                 #f4f4f5;
  --muted-foreground:      #71717a;
  --accent:                #f4f4f5;
  --accent-foreground:     #18181b;
  --destructive:           #fa6565;
  --destructive-foreground:#ffffff;

  /* ----- Lines & focus ----- */
  --border:                #e4e4e7;
  --input:                 #e4e4e7;
  --ring:                  #d2fc5c;

  /* ----- Radius scale ----- */
  --radius:                0.75rem;
  --radius-sm:             calc(var(--radius) - 4px);
  --radius-md:             calc(var(--radius) - 2px);
  --radius-lg:             var(--radius);
  --radius-xl:             calc(var(--radius) + 4px);

  /* ----- Type ----- */
  --font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;

  /* ----- Elevation ----- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
}

.dark {
  --background:            #09090b;
  --foreground:            #fafafa;
  --card:                  #0c0c0f;
  --card-foreground:       #fafafa;
  --popover:               #18181b;
  --popover-foreground:    #fafafa;

  --primary:               #818CF8;   /* indigo */
  --primary-foreground:    #18181b;   /* dark text on primary */
  --secondary:             #27272a;
  --secondary-foreground:  #fafafa;
  --muted:                 #27272a;
  --muted-foreground:      #a1a1aa;
  --accent:                #27272a;
  --accent-foreground:     #fafafa;
  --destructive:           #fa6565;
  --destructive-foreground:#fafafa;

  --border:                #27272a;
  --input:                 #2a2a30;
  --ring:                  #d2fc5c;
}

* { border-color: var(--border); }

body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}