/* ==========================================================================
   Runey Design System — Design Tokens (CSS custom properties)
   Source: runey.app (extracted 2026-09-02)
   Color tokens are HSL triplets (no hsl() wrapper) so they compose with
   opacity: color: hsl(var(--primary) / 0.6)
   ========================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --background: 0 0% 98%;          /* #FAFAFA page ground */
  --foreground: 0 0% 10%;          /* #1A1A1A text */
  --card: 0 0% 100%;               /* #FFFFFF */
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --customer-pane: 0 0% 94%;       /* #F0F0F0 secondary pane */

  /* ---------- Brand (monochrome) ---------- */
  --primary: 0 0% 16%;             /* #292929 */
  --primary-light: 0 0% 34%;       /* #575757 gradient top of CTA */
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;           /* #F5F5F5 */
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 46%;    /* #757575 */
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 20%;

  /* ---------- Semantic ---------- */
  --destructive: 0 100% 65%;       /* #FF4D4D */
  --destructive-foreground: 0 0% 100%;
  --success: 93 64% 52%;           /* #7DD333 */
  --success-foreground: 0 0% 100%;
  --warning: 39 100% 64%;          /* #FFBF47 */
  --warning-foreground: 0 0% 100%;
  --orange: 16 100% 67%;           /* #FF8257 */
  --orange-foreground: 0 0% 100%;

  /* ---------- Lines & focus ---------- */
  --border: 0 0% 92%;              /* #EBEBEB */
  --input: 0 0% 92%;
  --ring: 0 0% 16%;

  /* ---------- Charts ---------- */
  --chart-1: 0 0% 16%;
  --chart-2: 88 63% 59%;
  --chart-3: 39 100% 64%;
  --chart-4: 200 70% 50%;
  --chart-5: 0 100% 65%;

  /* ---------- Sidebar (app shell) ---------- */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 26%;
  --sidebar-primary: 0 0% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 96%;
  --sidebar-accent-foreground: 0 0% 10%;
  --sidebar-border: 0 0% 91%;
  --sidebar-ring: 0 0% 60%;

  /* ---------- Footer (always dark) ---------- */
  --footer-bg: 0 0% 0%;
  --footer-fg: 0 0% 100%;

  /* ---------- Radius ---------- */
  --radius: 0.875rem;              /* 14px base */
  --radius-sm: 0.5rem;             /* 8px  */
  --radius-md: 0.75rem;            /* 12px icon tiles, inputs */
  --radius-lg: 1rem;               /* 16px cards (mobile) */
  --radius-xl: 1.5rem;             /* 24px cards (desktop), app frames */
  --radius-full: 9999px;           /* pills: buttons, tabs, badges */

  /* ---------- Typography ---------- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Manrope", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs: 0.625rem;  /* 10px  eyebrow chips */
  --text-xs: 0.75rem;    /* 12px  tabs, badges */
  --text-sm-: 0.8125rem; /* 13px  body-small, nav, footer links */
  --text-sm: 0.875rem;   /* 14px  body, secondary buttons */
  --text-base: 1rem;     /* 16px  body-large, list items */
  --text-lg: 1.125rem;   /* 18px  hero lead (desktop) */
  --text-xl: 1.25rem;    /* 20px  h3 / h2 mobile */
  --text-2xl: 1.5rem;    /* 24px  h3 large */
  --text-3xl: 2rem;      /* 32px  h2 desktop */
  --text-4xl: 2.25rem;   /* 36px  h1 mobile, stat numbers */
  --text-6xl: 4rem;      /* 64px  h1 desktop */

  --leading-none: 1.05;
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.03em;   /* h1 */
  --tracking-snug: -0.025em;   /* h2/h3 */
  --tracking-wide: 0.025em;    /* eyebrow */
  --tracking-wider: 0.05em;    /* uppercase chips */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- Spacing (4px grid) ---------- */
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 1100px;
  --content-prose: 768px;
  --content-narrow: 672px;
  --content-xs: 576px;
  --gutter: 1rem;              /* 16px mobile */
  --gutter-md: 1.5rem;         /* 24px desktop */
  --nav-height: 78px;
  --section-y: 3.5rem;         /* 56px mobile */
  --section-y-md: 5rem;        /* 80px desktop */

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  /* Signature "embossed" CTA shadow */
  --shadow-cta:
    inset 0 1px 0 0 rgb(255 255 255 / 0.25),
    inset 0 -1px 0 0 rgb(0 0 0 / 0.10),
    0 1px 3px 0 hsl(var(--primary) / 0.40),
    0 4px 12px -4px hsl(var(--primary) / 0.35);
  --shadow-cta-hover:
    inset 0 1px 0 0 rgb(255 255 255 / 0.30),
    inset 0 -1px 0 0 rgb(0 0 0 / 0.12),
    0 2px 6px 0 hsl(var(--primary) / 0.45),
    0 8px 20px -4px hsl(var(--primary) / 0.40);
  --shadow-cta-active:
    inset 0 2px 4px 0 rgb(0 0 0 / 0.20),
    0 1px 2px 0 hsl(var(--primary) / 0.30);

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-reveal: 700ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hover-lift: translateY(-3px) scale(1.03);

  /* ---------- Z-index ---------- */
  --z-nav: 50;
  --z-popover: 60;
  --z-modal: 100;
  --z-toast: 110;

  color-scheme: light;
}

/* ==========================================================================
   Dark theme (class strategy: <html class="dark">)
   ========================================================================== */
.dark {
  --background: 0 0% 5%;
  --foreground: 0 0% 93%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 93%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 93%;
  --customer-pane: 0 0% 8%;

  --primary: 0 0% 85%;
  --primary-light: 0 0% 95%;
  --primary-foreground: 0 0% 5%;
  --secondary: 0 0% 13%;
  --secondary-foreground: 0 0% 88%;
  --muted: 0 0% 13%;
  --muted-foreground: 0 0% 50%;
  --accent: 0 0% 16%;
  --accent-foreground: 0 0% 90%;

  --destructive: 0 100% 65%;
  --destructive-foreground: 0 0% 100%;
  --success: 93 64% 52%;
  --success-foreground: 0 0% 100%;
  --warning: 39 100% 64%;
  --warning-foreground: 0 0% 100%;
  --orange: 16 100% 67%;
  --orange-foreground: 0 0% 100%;

  --border: 0 0% 16%;
  --input: 0 0% 16%;
  --ring: 0 0% 85%;

  --chart-1: 0 0% 85%;

  --sidebar-background: 0 0% 6%;
  --sidebar-foreground: 0 0% 88%;
  --sidebar-primary: 0 0% 85%;
  --sidebar-primary-foreground: 0 0% 5%;
  --sidebar-accent: 0 0% 12%;
  --sidebar-accent-foreground: 0 0% 88%;
  --sidebar-border: 0 0% 14%;
  --sidebar-ring: 0 0% 60%;

  color-scheme: dark;
}