/*
  Circles — design tokens
  Generated from tokens/tokens.json by tokens/build.mjs — do not edit by hand.
  One theme only (Dark) — by design, not a default waiting on a light mode.
  Every color pair here is contrast-checked (WCAG 2, 4.5:1 text / 3:1 focus
  rings and meaningful marks) against these exact surfaces.

  Load this file before circles.css.
*/

:root {
  /* Color */
  --surface-100: #140e24;   /* page background */
  --surface-200: #1d1638;   /* raised: cards, dialogs, menus, accordion panels */
  --surface-300: #251d45;   /* sunken: inputs, wells, code blocks */
  --border: #362c57;        /* decorative dividers only — never a control's only boundary signal */
  --ink: #f3effb;           /* primary text and icons */
  --ink-muted: #b3a8ce;     /* secondary text, placeholders, captions */
  --brand: #a178ff;         /* primary action: filled buttons, active tab, selected state, links, focus-ring */
  --brand-on: #140e24;      /* text/icons on a brand fill */
  --brand-muted: #2c2150;   /* tinted bg for hover/selected/pressed */
  --accent: #ffd23f;        /* secondary emphasis: highlight chips, celebratory moments */
  --accent-on: #140e24;
  --success: #22c79a;
  --success-on: #140e24;
  --warning: #ffb020;
  --warning-on: #140e24;
  --danger: #ff6b85;
  --danger-on: #140e24;
  --info: #7fa8ff;
  --info-on: #140e24;
  --spectrum-1: var(--brand); /* decorative circle palette (avatars, logo, orbs, bursts) — identity, never state. Text on any spectrum fill: spectrum-on */
  --spectrum-2: #ff7ac6;    /* spectrum: bubblegum */
  --spectrum-3: #ffd23f;    /* spectrum: sun */
  --spectrum-4: #5ee3b5;    /* spectrum: mint */
  --spectrum-5: #7fb8ff;    /* spectrum: sky */
  --spectrum-on: #140e24;   /* text/icons on any spectrum fill (7:1 or better on all five) */
  --focus-ring: var(--brand); /* the 2px outline on every keyboard-focused control, offset 2px */
  --scrim: rgba(8, 5, 16, 0.6); /* dims the page behind a Drawer / bottom sheet */
  --scrim-soft: rgba(8, 5, 16, 0.4); /* dims (and on web, blurs) the page behind a Popover */

  /* Type */
  --font-sans: Outfit, system-ui, sans-serif; /* text: body, labels, captions */
  --font-display: Unbounded, Outfit, system-ui, sans-serif; /* display + headings + the wordmark */

  /* Spacing (4px base grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Button heights — every text button is exactly one of these, whatever its
     label's font or border (icon-only buttons are circles of their own size). */
  --btn-height-sm: 30px;
  --btn-height: 38px;
  --btn-height-lg: 46px;

  /* Radius */
  --radius-sm: 8px;         /* checkboxes, small chips, badges (inputs: --radius-input) */
  --radius-md: 14px;        /* menu items, small cards, accordion items */
  --radius-lg: 24px;        /* cards, dialogs, panels */
  --radius-input: 0;        /* every text field, select and text area: square (set to var(--radius-md) to round them again) */
  --radius-pill: 9999px;    /* buttons, toggles, avatars, tabs — anything that should read as a full circle */

  /* Input */
  --input-padding-y: calc(var(--space-3) + 2px); /* room above and below the text inside a field (14px) */

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55);

  /* Size */
  --touch-target-ios: 44px;
  --touch-target-android: 48px;
  --avatar-sm: 28px;
  --avatar-md: 36px;
  --avatar-lg: 44px;
  --avatar-xl: 64px;

  /* Motion */
  --duration-fast: 120ms;   /* state changes: hover/press fills, chip and tab selection */
  --duration-base: 160ms;   /* fades */
  --duration-slow: 220ms;   /* slides */
  --duration-pop: 320ms;    /* springy state changes: checks, radios, switch knob, tab-bar bubble */
  --duration-expand: 360ms; /* expand/collapse in place: accordions, a minimizable card, a comment thread (Circles.expand) */
  --duration-reveal: 420ms; /* the circle reveal: a Popover growing out of its button, a Drawer out of its corner */
  --duration-ripple: 550ms; /* the ripple ring spreading from a press */
  --duration-swipe: 600ms;  /* feed sliding in after a swipe between circles */
  --easing-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out: entrances, the swipe slide-in, ripples */
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric: the circle reveal, so you can see the circle grow instead of it snapping open */
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoots a little and settles — for anything that pops */
}

/* Type scale — apply as classes: <h1 class="circles-display-md"> etc. */
.circles-display-lg { font: 700 52px/56px var(--font-display); letter-spacing: -0.03em; margin: 0; }
.circles-display-md { font: 700 36px/42px var(--font-display); letter-spacing: -0.025em; margin: 0; }
.circles-heading-lg { font: 700 24px/30px var(--font-display); letter-spacing: -0.02em; margin: 0; }
.circles-heading-md { font: 600 20px/26px var(--font-display); letter-spacing: -0.015em; margin: 0; }
.circles-heading-sm { font: 600 18px/24px var(--font-display); letter-spacing: -0.01em; margin: 0; }
.circles-body-lg    { font: 400 17px/26px var(--font-sans); margin: 0; }
.circles-paragraph  { font: 400 16px/22px var(--font-sans); margin: 0; } /* running text you're meant to read in full: dialogs, explanations */
.circles-body       { font: 400 15px/22px var(--font-sans); margin: 0; }
.circles-body-sm    { font: 400 15px/21px var(--font-sans); margin: 0; }
.circles-comment    { font: 400 15px/21px var(--font-sans); margin: 0; } /* a comment's text: body-sm + 2px, same line-height ratio — comments are read in full, not skimmed */
.circles-label      { font: 600 16px/22px var(--font-sans); }
.circles-label-sm   { font: 600 14px/20px var(--font-sans); letter-spacing: 0.02em; }
.circles-caption    { font: 500 14px/20px var(--font-sans); letter-spacing: 0.01em; }