/* PickPick — design tokens, generated from tokens.json */
:root, [data-theme="light"] {
  --surface-000: #ffffff;
  --surface-100: #fbf9ff;
  --surface-200: #f2eefb;
  --ink: #221a3d;
  --ink-muted: #5e5677;
  --line: #e4def4;
  --control-border: #8f87a8;
  --primary: #6a3fd8;
  --primary-hover: #5230b8;
  --on-primary: #ffffff;
  --primary-soft: #eee8ff;
  --on-primary-soft: #5230b8;
  --wing: #ffb37a;
  --accent: #ff9f45;
  --accent-strong: #a84a00;
  --accent-soft: #ffeedd;
  --success: #276a4f;
  --success-soft: #e1f2ea;
  --warning: #7a5200;
  --warning-soft: #fff1d0;
  --danger: #b3261e;
  --danger-soft: #fce8e6;
  --focus-ring: var(--primary);
  --shadow-card: 0 1px 2px rgba(34,26,61,0.06), 0 6px 18px rgba(34,26,61,0.07);
  --shadow-sheet: 0 -8px 28px rgba(34,26,61,0.10);
}

[data-theme="dark"] {
  --surface-000: #241d3a;
  --surface-100: #17122a;
  --surface-200: #100c1f;
  --ink: #f4f0ff;
  --ink-muted: #bdb5d6;
  --line: #362d52;
  --control-border: #7d739c;
  --primary: #a88bff;
  --primary-hover: #bca6ff;
  --on-primary: #1a1330;
  --primary-soft: #352a5c;
  --on-primary-soft: #d6c9ff;
  --wing: #ffc08f;
  --accent: #ffa95c;
  --accent-strong: #ffc08f;
  --accent-soft: #3d2a14;
  --success: #6fd1a3;
  --success-soft: #173a2c;
  --warning: #f2c45a;
  --warning-soft: #3a2e12;
  --danger: #ff8a80;
  --danger-soft: #3d1a18;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-sheet: 0 -8px 28px rgba(0,0,0,0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-000: #241d3a;
    --surface-100: #17122a;
    --surface-200: #100c1f;
    --ink: #f4f0ff;
    --ink-muted: #bdb5d6;
    --line: #362d52;
    --control-border: #7d739c;
    --primary: #a88bff;
    --primary-hover: #bca6ff;
    --on-primary: #1a1330;
    --primary-soft: #352a5c;
    --on-primary-soft: #d6c9ff;
    --wing: #ffc08f;
    --accent: #ffa95c;
    --accent-strong: #ffc08f;
    --accent-soft: #3d2a14;
    --success: #6fd1a3;
    --success-soft: #173a2c;
    --warning: #f2c45a;
    --warning-soft: #3a2e12;
    --danger: #ff8a80;
    --danger-soft: #3d1a18;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-sheet: 0 -8px 28px rgba(0,0,0,0.5);
  }
}

:root {
  --font-sans: Manrope, "Segoe UI", Roboto, system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

/* Text styles */
.text-display { font-family: var(--font-sans); font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.text-title { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; }
.text-heading { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; }
.text-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; }
.text-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.text-label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.02em; }
.text-time { font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.text-wordmark { font-family: var(--font-sans); font-size: 40px; line-height: 40px; font-weight: 800; letter-spacing: -0.035em; }

/*
 * App additions — not generated. Keep this block when tokens.css is re-exported from the design system.
 * Values come from the design system README and component previews.
 */
:root {
  --tap-size: 48px;          /* buttons and slots */
  --tap-size-lg: 56px;       /* the main button at the bottom of a screen */
  --dot-size: 5px;           /* load dots under a day of the schedule strip and the month picker */
  --plus-size: 40px;         /* the plus circle of a free window */
  --icon-glyph-size: 22px;   /* a drawn icon inside a button */
  --icon-inline-size: 20px;  /* a drawn icon at the start of a callout line */
  --code-box-size: 52px;     /* one box of the verification code */
  --day-size: 64px;          /* day tiles on the booking page and the schedule strip */
  --icon-size: 36px;         /* business icon in the booking page header */
  --illustration-size: 170px; /* the swallow on event screens */
  --empty-illustration-size: 120px; /* the swallow on empty screens (EmptyState: 96–120px) */
  --time-column: 52px;       /* time to the left of an appointment (MasterDayScreen) */
  --content-width: 28rem;    /* phone-width column on wide screens */
  --page-width: 1120px;      /* the content column of the landing on wide screens (B-43) */
  --border-hairline: 1px;    /* dividers in lists, free rows in the day */
  --border-control: 1.5px;   /* slots and inputs */
  --border-selected: 2px;    /* the chosen card */
  --leaf-size: 56px;         /* the calendar leaf on the appointment card */
  --leaf-strip-size: 20px;   /* the weekday strip of the calendar leaf */
  --radius-leaf: 12px;       /* corners of the calendar leaf */
  --avatar-size-sm: 22px;    /* the specialist's initial in a card row */
  --tab-pill-width: 64px;    /* the pill behind the icon of the current tab */
  --tab-pill-height: 32px;
  --tab-bar-height: calc(var(--tap-size-lg) + 2 * var(--space-2)); /* the tab bar above the safe area: a tab and its padding */
  --icon-tile-size: 40px;    /* the icon tile of a menu row */
  --business-logo-size: 52px; /* business initials or a person's initial on the "More" card */
  --radius-tile: 12px;       /* corners of the icon tile */
  --checkbox-size: 26px;     /* the rounded checkbox of a service row (ServiceCheckRow) */
  --checkbox-tick-size: 16px;
  --price-field-width: 92px; /* the inline price field of a service row (ServiceCheckRow) */

  --font-size-label: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-heading: 18px;
  --font-size-time: 20px;
  --font-size-title: 24px;
  --font-size-code: 28px;
  --font-size-display: 34px;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height: 1.5;
  --line-height-sm: 20px;    /* small text: callouts (text-body-sm) */
  --letter-spacing-title: -0.01em;
  --letter-spacing-display: -0.02em;
}

/* App text styles — not generated: the landing's lead text and the small wordmark in its header (B-43). */
.text-lead { font-family: var(--font-sans); font-size: var(--font-size-heading); line-height: 28px; font-weight: var(--font-weight-medium); color: var(--ink-muted); }
.text-wordmark--sm { font-size: var(--font-size-title); line-height: var(--font-size-title); }
.text-wordmark__domain { color: var(--primary); }

/*
 * App additions to the themes: the floating main button, the scrim under bottom sheets and text on accent
 * (ink turns light in the dark theme and can't sit on accent, so on-accent stays dark in both).
 */
:root, [data-theme="light"] {
  --shadow-fab: 0 8px 20px rgba(106,63,216,0.35);
  --scrim: rgba(34,26,61,0.36);
  --on-accent: #221a3d;
}

[data-theme="dark"] {
  --shadow-fab: 0 8px 20px rgba(0,0,0,0.55);
  --scrim: rgba(0,0,0,0.6);
  --on-accent: #221a3d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-fab: 0 8px 20px rgba(0,0,0,0.55);
    --scrim: rgba(0,0,0,0.6);
    --on-accent: #221a3d;
  }
}