/* Surf Design Tokens — generated from Figma variables (All pages of Surf.fig) */

:root {
  /* ---- primitives: brand ---- */
  --brand:            #ff2882;
  --brand-60:         #ff288299;
  --brand-30:         #ff28824d;
  --brand-10:         #ff28821a;
  --brand-deep-teal:  #07272d;
  --brand-black-aqua: #002f38;
  --brand-dusty-teal: #6ba4b8;
  --brand-seafoam:    #b6cfd0;

  /* ---- primitives: neutral ---- */
  --neutral-0: #ffffff;   --neutral-50: #fafafa;  --neutral-100: #f5f4f4;
  --neutral-200: #e7e7e7; --neutral-300: #d8d8d8; --neutral-400: #aaaaaa;
  --neutral-500: #7a7a7a; --neutral-600: #5b5b5b; --neutral-700: #464646;
  --neutral-800: #2a2a2a; --neutral-900: #212121; --neutral-950: #1b1b1b;
  --neutral-1000: #101010;

  /* ---- primitives: chart ---- */
  --chart-blue: #5b8def; --chart-cyan: #06b6d4; --chart-lime: #84cc16;
  --chart-orange: #f59e42; --chart-red: #e54d4d; --chart-rose: #f472b6;
  --chart-violet: #8b5cf6; --chart-yellow: #facc15; --chart-lavender: #a78bfa;

  /* ---- semantic: light mode (default) ---- */
  --bg-chat:         #fcfcfc;
  --bg-chat-nav:     #f4f4f4;
  --bg-base:         #ffffffe0;   /* translucent glass */
  --bg-base-opaque:  #ffffff;
  --bg-base-hover:   #2a2a2a0a;
  --bg-subtle:       #2a2a2a0a;
  --bg-subtle-hover: #2a2a2a0f;
  --bg-menu:         #ffffff;

  --fg-base:     #212121;
  --fg-subtle:   #7a7a7a;
  --fg-muted:    #aaaaaa;
  --fg-disabled: #d8d8d8;
  --fg-brand:    #ff2882;   /* Figma: fg-red */
  --fg-brand-60: #ff288299;
  --fg-brand-30: #ff28824d;
  --fg-error:    #f5222d;

  --border-base:   #2a2a2a0a;
  --border-strong: #2a2a2a14;
  --border-danger: #f5222d4d;

  --data-green:   #1db699;
  --data-red:     #f5222d;
  --data-blue:    #1677ff;
  --data-blue-60: #1677ff99;
  --data-yellow:  #fadb14;
  --data-purple:  #722ed1;

  /* ---- tags (bg = 10% tints) ---- */
  --tag-neutral-bg: #2a2a2a0f; --tag-neutral-fg: #7a7a7a;
  --tag-pink-bg:    #b88ea71a; --tag-pink-fg:    #b88ea7;
  --tag-blue-bg:    #5bb5ff1a; --tag-blue-fg:    #5bb5ff;
  --tag-cyan-bg:    #74ada41a; --tag-cyan-fg:    #74ada4;
  --tag-purple-bg:  #908eb81a; --tag-purple-fg:  #908eb8;
  --tag-orange-bg:  #b8a08e1a; --tag-orange-fg:  #b8a08e;
  --tag-gold-bg:    #dec3781a; --tag-gold-fg:    #d3aa3c; --tag-gold-icon: #dec378;

  /* ---- gradients ---- */
  --gradient-g1: linear-gradient(135deg, #ffacc6 0%, #b6e0f5 100%);
  --gradient-g2: linear-gradient(135deg, #9796f0 0%, #fbc7d4 100%);
  --gradient-g3: linear-gradient(135deg, #ed4264 0%, #ffedbc 100%);
  --gradient-g4: linear-gradient(135deg, #fedc2a 0%, #dd5789 51.4%, #7a2c9e 100%);
  --gradient-g5: linear-gradient(135deg, #fc3bb2 0%, #f7906e 100%);
  /* plan-tier gradients — light theme uses the Figma "-Light" variants (deeper tones, legible on white) */
  --gradient-upgrade: linear-gradient(135deg, #ffdab2 0%, #fd5d92 50.9%, #ff9fbf 100%);
  --gradient-pro:  linear-gradient(135deg, #7a96ac 0%, #6d7f8d 24%, #9fb9ce 54.8%, #6d7f8d 91.8%);
  --gradient-plus: linear-gradient(135deg, #9e8976 0%, #7a5e50 19.5%, #f6d0ab 41%, #9d774e 61%, #c99b70 82.3%, #795f52 100%);
  --gradient-max:  linear-gradient(135deg, #8c421d 0%, #d2af00 37%, #cd9124 67.3%, #d4a041 100%);
  --gradient-new-function: linear-gradient(135deg, #6e86ff 0%, #ff2882 60.1%, #ff98a4 100%);
  --gradient-suggestion: linear-gradient(135deg, #fd538c 0%, #5aa6e0 44.7%, #ffdab2 98.1%);
  --gradient-grade-c: linear-gradient(135deg, #7f7575 23.1%, #a59d9d 41%, #8f8686 57.5%, #a59d9d 77.2%, #655b5b 100%);
  --gradient-grade-d: linear-gradient(135deg, #5a5a5a 19.5%, #6d6c6c 41%, #515151 61%, #6d6c6c 80.3%, #656565 100%);
  --gradient-gold:   var(--gradient-max);
  --gradient-silver: linear-gradient(135deg, #7a96ac 0%, #eaeff3 18%, #c2d4e1 31.5%, #ffffff 49.2%, #d4dee5 61.5%, #abbdc8 78.5%, #bccad7 95.5%);
  --gradient-bronze: linear-gradient(135deg, #9e8976 0%, #7a5e50 19.5%, #f6d0ab 41%, #9d774e 61%, #c99b70 85.5%, #795f52 100%);
  --gradient-loading: radial-gradient(circle, #ffb0c8 0%, #ff2868 100%);

  /* ---- typography ---- */
  --font-sans: "Lato", -apple-system, "Segoe UI", sans-serif;
  --font-secondary: "Inter", sans-serif;
  --font-numeric: "Open Runde", "DM Sans", sans-serif;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;
  --fs-h1: 32px; --lh-h1: 40px;   /* Lato Black  */
  --fs-h2: 24px; --lh-h2: 32px;   /* Lato Black  */
  --fs-h3: 18px; --lh-h3: 26px;   /* Lato Bold   */
  --fs-b1: 16px; --lh-b1: 24px;
  --fs-b2: 14px; --lh-b2: 20px;
  --fs-b3: 13px; --lh-b3: 18px;
  --fs-b4: 12px; --lh-b4: 16px;

  /* ---- radius ---- */
  --radius-4: 4px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px;
  --radius-16: 16px; --radius-20: 20px; --radius-24: 24px; --radius-full: 999px;

  /* ---- spacing ---- */
  --spacing-2: 2px; --spacing-4: 4px; --spacing-8: 8px;
  --spacing-12: 12px; --spacing-16: 16px;

  /* ---- shadows / effects ---- */
  --shadow-card-rest: 0 2px 4px rgba(0,0,0,.04), 0 1px 2px -1px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.08);
  --shadow-card: 0 0 8px rgba(155,155,155,.14);
  --shadow-drop: 0 6px 12px rgba(51,51,51,.08), 0 1px 1px rgba(51,51,51,.08);
  --blur-glass: blur(64px);
}

/* ---- dark mode overrides ---- */
:root[data-theme="dark"], .dark {
  --bg-chat:         #101010;
  --bg-chat-nav:     #171717;
  --bg-base:         #2a2a2acc;
  --bg-base-opaque:  #171717;
  --bg-base-hover:   #ffffff0a;
  --bg-subtle:       #ffffff0a;
  --bg-subtle-hover: #ffffff1f;
  --bg-menu:         #252525;

  --fg-base:     #e7e7e7;
  --fg-subtle:   #aaaaaa;
  --fg-muted:    #7a7a7a;
  --fg-disabled: #5b5b5b;
  --fg-error:    #ff4d4f;
  /* --fg-brand unchanged (#ff2882) */

  --border-base:   #ffffff0a;
  --border-strong: #ffffff14;
  --border-danger: #ff4d4f;

  --data-red:     #ff4d4f;
  --data-blue:    #4096ff;
  --data-blue-60: #4096ff99;
  --data-yellow:  #ffec3d;
  --data-purple:  #9254de;
  /* --data-green unchanged (#1db699) */

  --tag-neutral-bg: #ffffff0f;
  --tag-gold-fg:    #dec378;

  /* dark theme uses the Figma base variants (pale tones, legible on dark) */
  --gradient-upgrade: linear-gradient(135deg, #ffedf3 0%, #ff9fbf 30.4%, #fd5d92 59.4%, #ffdab2 100%);
  --gradient-pro:  linear-gradient(135deg, #7a96ac 0%, #c5d6e2 25.7%, #eaeff3 45.5%, #c5d6e2 63.9%, #a3bccf 87.8%);
  --gradient-plus: linear-gradient(135deg, #986732 0%, #a7825b 22.9%, #f6d0ab 44.9%, #a07043 66.4%, #9d774e 100%);
  --gradient-max:  linear-gradient(135deg, #8c421d 0%, #fbe67b 32.5%, #fcfbe7 53.5%, #f7d14e 77%, #d4a041 100%);
}