{
  "$description": "Design tokens for the Pebble style. Generated from tokens.css by scripts/sync-tokens.mjs; edit tokens.css, not this file.",
  "modes": {
    "default": "light",
    "alternate": "dark"
  },
  "color": {
    "bg": {
      "$type": "color",
      "$value": "#f1eef5",
      "$dark": "#1a1322",
      "$description": "pebble grey with a breath of lilac; never cream, never white"
    },
    "surface": {
      "$type": "color",
      "$value": "#fcfbfe",
      "$dark": "#261c31",
      "$description": "white clay: cards, phone screens, plans"
    },
    "sunk": {
      "$type": "color",
      "$value": "#e6e0ee",
      "$dark": "#130e19",
      "$description": "pressed-in wells: tracks, inputs, toggle beds"
    },
    "tray": {
      "$type": "color",
      "$value": "#e3dcee",
      "$dark": "#150f1c",
      "$description": "the basin the pebbles settle in"
    },
    "line": {
      "$type": "color",
      "$value": "#ddd5e6",
      "$dark": "#34293f",
      "$description": "the rare hairline"
    },
    "ink": {
      "$type": "color",
      "$value": "#2b1435",
      "$dark": "#f8f1fb",
      "$description": "deep plum: all text"
    },
    "ink-2": {
      "$type": "color",
      "$value": "#4e3a59",
      "$dark": "#ddcfe5"
    },
    "muted": {
      "$type": "color",
      "$value": "#67566f",
      "$dark": "#ae9eb9",
      "$description": "quiet text; AA on bg, surface, sunk and every tint"
    },
    "mint": {
      "$type": "color",
      "$value": "#9fe0c0",
      "$dark": "#8ee3bc"
    },
    "lilac": {
      "$type": "color",
      "$value": "#c8b7fb",
      "$dark": "#bca9ff"
    },
    "butter": {
      "$type": "color",
      "$value": "#ffd86a",
      "$dark": "#ffd664"
    },
    "blush": {
      "$type": "color",
      "$value": "#ffb3a6",
      "$dark": "#ffa999"
    },
    "on-pastel": {
      "$type": "color",
      "$value": "#2b1435",
      "$description": "text on a pigment (pebbles, coins, pills): plum in both modes"
    },
    "tint-mint": {
      "$type": "color",
      "$value": "#d3f1e2",
      "$dark": "#1b3530"
    },
    "tint-lilac": {
      "$type": "color",
      "$value": "#e6defd",
      "$dark": "#2b2346"
    },
    "tint-butter": {
      "$type": "color",
      "$value": "#fff0c2",
      "$dark": "#362d18"
    },
    "tint-blush": {
      "$type": "color",
      "$value": "#ffe2dc",
      "$dark": "#3c2229"
    },
    "bold": {
      "$type": "color",
      "$value": "#3a1748",
      "$dark": "#ffd664"
    },
    "bold-2": {
      "$type": "color",
      "$value": "#4c2160",
      "$dark": "#ffe28c",
      "$description": "bold, hovered"
    },
    "on-bold": {
      "$type": "color",
      "$value": "#fff3cc",
      "$dark": "#2b1435",
      "$description": "text on bold"
    },
    "focus": {
      "$type": "color",
      "$value": "#6a2fd8",
      "$dark": "#ffd664",
      "$description": "focus ring"
    },
    "ok": {
      "$type": "color",
      "$value": "#1d7650",
      "$dark": "#8ee3bc",
      "$description": "\"covered\", \"on track\" text"
    },
    "glow": {
      "$type": "color",
      "$value": "rgba(58, 23, 72, 0.28)",
      "$dark": "rgba(188, 169, 255, 0.3)",
      "$description": "the coloured part of outer shadows (a glow in dusk)"
    },
    "hi": {
      "$type": "color",
      "$value": "rgba(255, 255, 255, 0.6)",
      "$dark": "rgba(255, 255, 255, 0.07)",
      "$description": "specular highlight on clay"
    },
    "knob": {
      "$type": "color",
      "$value": "#ffffff",
      "$dark": "#f3eaf8",
      "$description": "switch knobs: the brightest clay on the page"
    }
  },
  "shadow": {
    "shadow-clay": {
      "$type": "shadow",
      "$value": "inset 0 2px 1px rgba(255, 255, 255, 0.75), inset 0 -10px 18px -8px rgba(43, 20, 53, 0.16), 0 2px 3px rgba(43, 20, 53, 0.06), 0 18px 34px -18px var(--glow)",
      "$dark": "inset 0 1px 1px rgba(255, 255, 255, 0.13), inset 0 -12px 22px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.035), 0 18px 46px -18px var(--glow)"
    },
    "shadow-lift": {
      "$type": "shadow",
      "$value": "inset 0 2px 1px rgba(255, 255, 255, 0.8), inset 0 -10px 18px -8px rgba(43, 20, 53, 0.14), 0 6px 10px -4px rgba(43, 20, 53, 0.08), 0 38px 60px -26px var(--glow)",
      "$dark": "inset 0 1px 1px rgba(255, 255, 255, 0.16), inset 0 -12px 22px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 70px -20px var(--glow)"
    },
    "shadow-press": {
      "$type": "shadow",
      "$value": "inset 0 6px 14px rgba(43, 20, 53, 0.26), inset 0 -2px 1px rgba(255, 255, 255, 0.4), 0 1px 0 rgba(255, 255, 255, 0.7)",
      "$dark": "inset 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.08)"
    },
    "shadow-sunk": {
      "$type": "shadow",
      "$value": "inset 0 5px 12px rgba(43, 20, 53, 0.13), inset 0 -2px 1px rgba(255, 255, 255, 0.85)",
      "$dark": "inset 0 5px 14px rgba(0, 0, 0, 0.55), inset 0 -1px 1px rgba(255, 255, 255, 0.07)"
    },
    "shadow-btn": {
      "$type": "shadow",
      "$value": "inset 0 2px 1px rgba(255, 255, 255, 0.26), inset 0 -7px 12px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(43, 20, 53, 0.18), 0 14px 26px -12px rgba(43, 20, 53, 0.6)",
      "$dark": "inset 0 2px 1px rgba(255, 255, 255, 0.65), inset 0 -7px 12px rgba(150, 90, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 34px -8px rgba(255, 214, 100, 0.55)"
    },
    "shadow-btn-press": {
      "$type": "shadow",
      "$value": "inset 0 6px 12px rgba(0, 0, 0, 0.42), inset 0 -1px 1px rgba(255, 255, 255, 0.14), 0 1px 1px rgba(43, 20, 53, 0.12)",
      "$dark": "inset 0 6px 12px rgba(120, 70, 0, 0.45), inset 0 -1px 1px rgba(255, 255, 255, 0.3), 0 0 18px -4px rgba(255, 214, 100, 0.45)"
    }
  },
  "type": {
    "display": {
      "$type": "fontFamily",
      "$value": "\"Fredoka\", \"Nunito\", ui-rounded, \"SF Pro Rounded\", system-ui, sans-serif"
    },
    "body": {
      "$type": "fontFamily",
      "$value": "\"Figtree\", \"Segoe UI\", system-ui, sans-serif"
    },
    "fs-h1": {
      "$type": "fontFamily",
      "$value": "clamp(46px, 6.2vw, 92px)"
    },
    "fs-h2": {
      "$type": "fontFamily",
      "$value": "clamp(34px, 4.6vw, 64px)"
    },
    "fs-cta": {
      "$type": "fontFamily",
      "$value": "clamp(40px, 6vw, 88px)"
    },
    "fs-h3": {
      "$type": "dimension",
      "$value": "23px"
    },
    "fs-lead": {
      "$type": "fontFamily",
      "$value": "clamp(17px, 1.4vw, 20px)"
    },
    "fs-body": {
      "$type": "dimension",
      "$value": "16.5px"
    },
    "fs-small": {
      "$type": "dimension",
      "$value": "14px"
    },
    "fs-tiny": {
      "$type": "dimension",
      "$value": "12.5px"
    }
  },
  "space": {
    "s-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "s-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "s-3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "s-4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "s-5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "s-6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "s-7": {
      "$type": "dimension",
      "$value": "48px"
    },
    "s-8": {
      "$type": "dimension",
      "$value": "72px"
    },
    "s-9": {
      "$type": "dimension",
      "$value": "120px"
    },
    "s-10": {
      "$type": "dimension",
      "$value": "160px"
    },
    "wrap": {
      "$type": "dimension",
      "$value": "1200px"
    },
    "gutter": {
      "$type": "dimension",
      "$value": "24px"
    }
  },
  "radius": {
    "r-xs": {
      "$type": "dimension",
      "$value": "10px"
    },
    "r-sm": {
      "$type": "dimension",
      "$value": "16px"
    },
    "r-md": {
      "$type": "dimension",
      "$value": "24px"
    },
    "r-lg": {
      "$type": "dimension",
      "$value": "32px"
    },
    "r-xl": {
      "$type": "dimension",
      "$value": "44px"
    },
    "r-pill": {
      "$type": "dimension",
      "$value": "999px"
    }
  },
  "motion": {
    "ease": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.22, 1, 0.36, 1)"
    },
    "spring": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.34, 1.56, 0.64, 1)",
      "$description": "overshoot: lifts, knobs, reveals"
    },
    "spring-soft": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.3, 1.3, 0.6, 1)"
    },
    "d-press": {
      "$type": "duration",
      "$value": "0.14s",
      "$description": "button press in"
    },
    "d-release": {
      "$type": "duration",
      "$value": "0.5s",
      "$description": "button springs back out"
    },
    "d-lift": {
      "$type": "duration",
      "$value": "0.55s",
      "$description": "card hover lift"
    },
    "d-enter": {
      "$type": "duration",
      "$value": "0.9s",
      "$description": "scroll reveal pop"
    }
  }
}