/* ============================================================
   Bside Design Tokens — extracted from bside-83a79b.webflow.css
   ============================================================ */

:root {
  /* ── Fonts ─────────────────────────────────────────────── */
  --font-heading: "Showcard Gothic", Arial, sans-serif;
  --font-body:    Inter, sans-serif;
  --font-button:  "Showcard Gothic", Arial, sans-serif;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius: 999px;

  /* ── Base palette ───────────────────────────────────────── */
  --black:    #000;
  --white:    #fff;
  --pink:     #ff8ac3;
  --pink-5:   #ff8ac30d;
  --black-60: #0009;
  --gray:     #667085;
  --gray-20:  #dedede33;
  --gray-light: #f9fafb;

  /* ── Light mode ─────────────────────────────────────────── */
  --color-background:         #f7f8f9;
  --color-foreground:         var(--black);
  --color-card:               var(--white);
  --color-card-foreground:    #060606;
  --color-popover:            #ebebeb;
  --color-popover-foreground: #060606;
  --color-primary:            #f581ba;
  --color-primary-foreground: #140a0e;
  --color-secondary:          #ffdef4;
  --color-secondary-foreground: #120b0e;
  --color-muted:              #f2f2f2;
  --color-muted-foreground:   #777374;
  --color-accent:             #dedede;
  --color-accent-foreground:  #0d0d0d;
  --color-destructive:        #d74843;
  --color-border:             #d0d5dd;
  --color-input:              #d3d8e0;
  --color-ring:               #ef97c0;

  /* ── Dark mode ──────────────────────────────────────────── */
  --color-background-dark:         #050505;
  --color-foreground-dark:         #f8f8f8;
  --color-card-dark:               #181818;
  --color-card-foreground-dark:    #f8f8f8;
  --color-popover-dark:            #181818;
  --color-popover-foreground-dark: #f8f8f8;
  --color-primary-dark:            var(--pink);
  --color-primary-foreground-dark: #0b0406;
  --color-secondary-dark:          #32051f;
  --color-secondary-foreground-dark: #fef6f9;
  --color-muted-dark:              #020202;
  --color-muted-foreground-dark:   #8b8b8b;
  --color-accent-dark:             #2d2d2d;
  --color-accent-foreground-dark:  #f8f8f8;
  --color-destructive-dark:        #de4e49;
  --color-border-dark:             #d0d5dd1a;
  --color-input-dark:              #ffffff26;
  --color-ring-dark:               #ef97c0;

  /* ── Charts ─────────────────────────────────────────────── */
  --chart-1: #d3629b;
  --chart-2: #e291b7;
  --chart-3: #c74c8d;
  --chart-4: #ca6b99;
  --chart-5: #ab4a7c;
  --chart-1-dark: var(--pink);
  --chart-2-dark: #ffc9f0;
  --chart-3-dark: #e265a5;
  --chart-4-dark: #ffb4e1;
  --chart-5-dark: #c56193;

  /* ── Sidebar ─────────────────────────────────────────────── */
  --sidebar:                     #f2f2f2;
  --sidebar-foreground:          #060606;
  --sidebar-primary:             #f581ba;
  --sidebar-primary-foreground:  #140a0e;
  --sidebar-accent:              #dedede;
  --sidebar-accent-foreground:   #0d0d0d;
  --sidebar-border:              #d0d5dd;
  --sidebar-ring:                #ef97c0;
  --sidebar-dark:                #0b0b0b;
  --sidebar-foreground-dark:     #f8f8f8;
  --sidebar-primary-dark:        var(--pink);
  --sidebar-primary-foreground-dark: #0b0406;
  --sidebar-accent-dark:         #2d2d2d;
  --sidebar-accent-foreground-dark: #f8f8f8;
  --sidebar-border-dark:         #ffffff1a;
  --sidebar-ring-dark:           #ef97c0;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width: 1440px;
  --page-padding: 80px;
}