/* Vendored verbatim from the Claude Design project (a085aab3), tokens/colors.css.
   Re-sync with `DesignSync get_file`; keep this file a byte-for-byte copy below
   the header so the diff stays readable. */

/* ============================================================
   Laminar — Color tokens
   Source of truth: Figma "Default" mode variable export (Base,
   Grey, Light blue, Lime, Citrine, Magenta, Apricot, Lilac, Clay,
   Charts Tint, Utility). Every hex below is one of those exact
   swatches — no invented shades. Neutral ramp = Grey + Base only.
   ============================================================ */

:root {
  /* ---- Base ---- */
  --black:        #000000;
  --black-85:     rgba(0,0,0,0.85);
  --black-60:     rgba(0,0,0,0.6);
  --white:        #FFFFFF;
  --white-60:     rgba(255,255,255,0.6);
  --white-40:     rgba(255,255,255,0.4);

  /* ---- Grey (Neutral ramp — exact Figma "Grey" collection, no added steps) ---- */
  --grey-950:      #F2F2F2;
  --grey-900:      #E5E5E5;
  --grey-700:      #B3B3B3;
  --grey-400:      #666666;
  --grey-150-rule: #252525;
  --grey-100-bg:   #161616;
  --grey-image-overlay: rgba(102,102,102,0.75);

  /* Neutral-ramp aliases (kept for existing components; values collapse onto the Grey set above) */
  --neutral-50:  var(--grey-950);
  --neutral-100: var(--grey-950);
  --neutral-200: var(--grey-900);
  --neutral-300: var(--grey-700);
  --neutral-400: var(--grey-400);
  --neutral-500: var(--grey-400);
  --neutral-600: var(--grey-150-rule);
  --neutral-700: var(--grey-150-rule);
  --neutral-800: var(--grey-100-bg);
  --neutral-900: var(--grey-100-bg);
  --neutral-950: var(--black);
  --paper:       var(--white);
  --paper-blue:  var(--white);

  /* ---- UI palette aliases (unchanged names, collapsed onto Grey set) ---- */
  --ui-black:        var(--black);
  --ui-white:        var(--white);
  --ui-paper:        var(--white);
  --ui-paper-blue:   var(--white);
  --ui-dark-grey-3:  var(--grey-150-rule);
  --ui-dark-grey-2:  var(--grey-150-rule);
  --ui-dark-grey-1:  var(--grey-400);
  --ui-grey:         var(--grey-400);
  --ui-light-grey-4: var(--grey-400);
  --ui-light-grey-3: var(--grey-700);
  --ui-light-grey-2: var(--grey-700);
  --ui-light-grey-1: var(--grey-900);

  /* ---- Accent: Light Blue ---- */
  --light-blue-pale:   #F0FBFF;
  --light-blue-light:  #CCF2FF;
  --light-blue:        #80DFFF;
  --light-blue-medium: #277B97;
  --light-blue-dark:   #0D161A;
  --light-blue-text:   var(--light-blue-medium);
  --light-blue-bg:     var(--light-blue-pale);
  --light-blue-shade-1: var(--light-blue-medium);
  --light-blue-tint-2:  var(--charts-tint-light-blue-60);

  /* ---- Accent: Lime ---- */
  --lime-pale:   #F1FFF0;
  --lime-light:  #DCFFD9;
  --lime:        #A5FF9E;
  --lime-medium: #098000;
  --lime-dark:   #0A1909;
  --lime-text:   var(--lime-medium);
  --lime-bg:     var(--lime-pale);

  /* ---- Accent: Citrine ---- */
  --citrine-pale:   #FCFCE3;
  --citrine-light:  #FAFAC0;
  --citrine:        #F2F261;
  --citrine-medium: #767600;
  --citrine-dark:   #161609;
  --citrine-text:   var(--citrine-medium);
  --citrine-bg:     var(--citrine-pale);

  /* ---- Accent: Magenta ---- */
  --magenta-pale:   #FFE8FF;
  --magenta-light:  #FFB2FF;
  --magenta:        #FF66FF;
  --magenta-medium: #BF2EBF;
  --magenta-dark:   #220E22;
  --magenta-text:   var(--magenta-medium);
  --magenta-bg:     var(--magenta-pale);

  /* ---- Accent: Apricot ---- */
  --apricot-pale:   #FFE9D9;
  --apricot-light:  #FF8F40;
  --apricot:        #FF6A00;
  --apricot-medium: #C05000;
  --apricot-dark:   #261000;
  --apricot-text:   var(--apricot-medium);
  --apricot-bg:     var(--apricot-pale);

  /* ---- Accent: Lilac ---- */
  --lilac-pale:   #F2F0FF;
  --lilac-light:  #E6E0FF;
  --lilac:        #BFB2FF;
  --lilac-medium: #7467B7;
  --lilac-dark:   #16151F;
  --lilac-text:   var(--lilac-medium);
  --lilac-bg:     var(--lilac-pale);

  /* ---- Clay ---- */
  --clay-pale:   #F7FAF5;
  --clay-light:  #ECF2E6;
  --clay:        #DAE5CF;
  --clay-medium: #6B7560;
  --clay-dark:   #161611;
  --clay-text:   var(--clay-medium);
  --clay-bg:     var(--clay-pale);

  /* ---- Charts Tint (exact alpha swatches used on chart fills) ---- */
  --charts-tint-lime-60:       rgba(165,255,158,0.6);
  --charts-tint-lime-30:       rgba(165,255,158,0.3);
  --charts-tint-light-blue-60: rgba(128,223,255,0.5);
  --charts-tint-light-blue-40: rgba(128,223,255,0.6);
  --charts-tint-lilac-60:      rgba(191,178,255,0.6);
  --charts-tint-lilac-40:      rgba(191,178,255,0.6);
  --charts-tint-magenta-60:    rgba(255,102,255,0.6);
  --charts-tint-magenta-40:    rgba(255,102,255,0.4);
  --charts-tint-apricot-60:    rgba(255,106,0,0.6);
  --charts-tint-apricot-40:    rgba(255,106,0,0.6);
  --charts-tint-citrine-60:    rgba(242,242,97,0.6);
  --charts-tint-citrine-40:    rgba(242,242,97,0.4);
  --charts-tint-clay-60:       rgba(218,229,207,0.6);
  --charts-tint-clay-40:       rgba(218,229,207,0.4);

  /* ---- Source-system brand colors (unchanged — not part of Accent/Neutral scope) ---- */
  --source-salesforce: #00A1E0;
  --source-sap:        #0370F2;
  --source-servicenow: #00850B;

  /* ============================================================
     Status palette — destructive + medium warning
     (left as-is: outside the Accent-family / Neutral-ramp scope,
     except Utility/Alert below which is the Figma-specified red)
  ============================================================ */
  --utility-alert: #CC1414;
  --destructive:         #C91919;
  --destructive-shade-1: #942525;
  --destructive-shade-2: #552222;
  --destructive-shade-3: #331212;
  --destructive-shade-4: #1A0808;
  --destructive-tint-4:  rgba(255,0,93,0.03);
  --destructive-tint-3:  rgba(255,0,93,0.06);
  --destructive-tint-2:  rgba(255,0,93,0.12);
  --destructive-tint-1:  rgba(255,0,93,0.25);

  --medium:         #D9AB21;
  --medium-shade-1: #997A1F;
  --medium-shade-2: #5C4B17;
  --medium-shade-3: #33290A;
  --medium-shade-4: #1A1404;
  --medium-tint-4:  rgba(217,171,33,0.06);
  --medium-tint-3:  rgba(217,171,33,0.25);
  --medium-tint-2:  rgba(217,171,33,0.50);
  --medium-tint-1:  rgba(217,171,33,0.66);
  --medium-text:    var(--medium-shade-2);
  --medium-bg:      var(--medium-tint-4);

  /* ============================================================
     Semantic aliases — light theme
  ============================================================ */
  --background:           var(--white);
  --foreground:           var(--black);
  --card:                 var(--white);
  --card-foreground:      var(--black);
  --popover:              var(--white);
  --popover-foreground:   var(--black);

  --primary:              var(--grey-150-rule);
  --primary-foreground:   var(--grey-950);
  --secondary:            var(--grey-950);
  --secondary-foreground: var(--grey-150-rule);
  --muted:                var(--grey-950);
  --muted-foreground:     var(--grey-400);
  --accent:               var(--grey-950);
  --accent-foreground:    var(--grey-150-rule);
  --destructive-foreground: var(--white);

  --border: var(--grey-900);
  --input:  var(--grey-900);
  --ring:   var(--grey-400);

  /* Sidebar */
  --sidebar:                   var(--grey-950);
  --sidebar-foreground:        var(--black);
  --sidebar-accent:            var(--grey-950);
  --sidebar-accent-foreground: var(--grey-150-rule);
  --sidebar-border:            var(--grey-900);

  /* Status semantics */
  --status-success:    var(--lime-medium);
  --status-success-bg: var(--lime-pale);
  --status-warning:    var(--apricot-medium);
  --status-warning-bg: var(--apricot-pale);
  --status-medium:     var(--medium-shade-2);
  --status-medium-bg:  var(--medium-tint-4);
  --status-info:       var(--lilac-medium);
  --status-info-bg:    var(--lilac-pale);
  --status-danger:     var(--utility-alert);
  --status-danger-bg:  var(--destructive-tint-3);
}

:root[data-theme="dark"] {
  --background:           var(--black);
  --foreground:           var(--white);
  --card:                 var(--grey-100-bg);
  --card-foreground:      var(--white);
  --popover:              var(--grey-100-bg);
  --popover-foreground:   var(--white);

  --primary:              var(--grey-900);
  --primary-foreground:   var(--grey-100-bg);
  --secondary:            var(--grey-100-bg);
  --secondary-foreground: var(--white);
  --muted:                var(--grey-100-bg);
  --muted-foreground:     var(--grey-400);
  --accent:               var(--grey-150-rule);
  --accent-foreground:    var(--white);
  --destructive:          #E84444;

  --border: rgba(255,255,255,0.1);
  --input:  rgba(255,255,255,0.15);
  --ring:   var(--grey-400);

  --sidebar:                   var(--grey-100-bg);
  --sidebar-foreground:        var(--white);
  --sidebar-accent:            var(--grey-150-rule);
  --sidebar-accent-foreground: var(--white);
  --sidebar-border:            rgba(255,255,255,0.1);
}

/* ============================================================
   Explicit light lock — pins a document to the light theme even
   if a host injects `.dark` on <html>. Opt in with
   <html data-theme="light"> (or class="light"). Higher specificity
   than the bare `.dark` scope, so it wins; documents that want dark
   simply omit it and use [data-theme="dark"] / .dark instead.
   ============================================================ */
:root[data-theme="light"], :root.light {
  --background:           var(--white);
  --foreground:           var(--black);
  --card:                 var(--white);
  --card-foreground:      var(--black);
  --popover:              var(--white);
  --popover-foreground:   var(--black);

  --primary:              var(--grey-150-rule);
  --primary-foreground:   var(--grey-950);
  --secondary:            var(--grey-950);
  --secondary-foreground: var(--grey-150-rule);
  --muted:                var(--grey-950);
  --muted-foreground:     var(--grey-400);
  --accent:               var(--grey-950);
  --accent-foreground:    var(--grey-150-rule);
  --destructive:          #C91919;

  --border: var(--grey-900);
  --input:  var(--grey-900);
  --ring:   var(--grey-400);

  --sidebar:                   var(--grey-950);
  --sidebar-foreground:        var(--black);
  --sidebar-accent:            var(--grey-950);
  --sidebar-accent-foreground: var(--grey-150-rule);
  --sidebar-border:            var(--grey-900);

  color-scheme: light;
}
/* Vendored verbatim from the Claude Design project (a085aab3), tokens/spacing.css.
   Re-sync with `DesignSync get_file`. */

/* ============================================================
   Laminar — Spacing, radius, shadow & layout tokens
   Tight 4px-based spacing. Small radii (the product reads crisp,
   not pill-soft). Shadows are barely-there — elevation comes from
   1px borders and subtle surface shifts.
   ============================================================ */

:root {
  /* 4px base spacing scale */
  --space-0:   0px;
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* Radii */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* Borders */
  --border-width: 1px;
  --border-width-2: 2px;

  /* Shadows — minimal elevation system */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.06), 0 1px 1px 0 rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06);

  /* Control heights (shadcn size ramp) */
  --control-h-xs: 28px;
  --control-h-sm: 32px;
  --control-h-md: 36px;
  --control-h-lg: 40px;
}
/* Vendored verbatim from the Claude Design project (a085aab3), tokens/typography.css.
   Re-sync with `DesignSync get_file`. */

/* ============================================================
   Laminar — Typography tokens
   One typeface, one weight. Hierarchy comes from SIZE and color
   only — no bold, no second face.
   Scale mirrors the Tailwind/shadcn ramp used in the product.
   ============================================================ */

:root {
  --font-sans: "Basel Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Single weight — the brand never uses bold for emphasis */
  --font-weight: 400;

  /* Type scale (font-size / line-height) */
  --text-xs:    12px;   --text-xs-lh:   16px;
  --text-sm:    14px;   --text-sm-lh:   20px;
  --text-base:  16px;   --text-base-lh: 24px;
  --text-lg:    18px;   --text-lg-lh:   28px;
  --text-xl:    20px;   --text-xl-lh:   28px;
  --text-2xl:   24px;   --text-2xl-lh:  32px;
  --text-3xl:   30px;   --text-3xl-lh:  36px;
  --text-4xl:   40px;   --text-4xl-lh:  44px;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;

  /* ---- App type scale ---- */
  --app-h1-size:        21px;  --app-h1-lh:        1.4;  /* @kind other */
  --app-h2-size:        14px;  --app-h2-lh:        1.4;  /* @kind other */
  --app-body-1-size:    14px;  --app-body-1-lh:    1.4;  /* @kind other */
  --app-body-2-size:    12px;  --app-body-2-lh:    1.4;  /* @kind other */
  --app-label-1-size:    8px;  --app-label-1-lh:   1.28; /* @kind other */
  --app-caption-1-size: 10px;  --app-caption-1-lh: 1.4;  /* @kind other */
  --app-caption-2-size:  8px;  --app-caption-2-lh: 1.4;  /* @kind other */
}
/* Wayfinder's own styles, on the Laminar brand tokens the build puts before them in app.css. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  color: var(--primary);
  background: var(--white);
}

a {
  color: inherit;
}

code,
pre,
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
}

.muted {
  color: var(--muted-foreground);
}

.failure {
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
}

button,
select,
input {
  font: inherit;
  height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: inherit;
}

button {
  cursor: pointer;
  background: var(--primary);
  color: var(--primary-foreground);
}

button.quiet {
  background: transparent;
  color: inherit;
}

.top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
  background: var(--white);
}

.top a {
  text-decoration: none;
}

.brand {
  font-size: var(--text-lg);
}

.search {
  flex: 1;
}

.search input[type="search"] {
  width: 100%;
}

.stamp {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  white-space: nowrap;
}

main {
  padding: var(--space-4) var(--space-6);
}

.home,
.sign-in {
  max-width: 720px;
  margin: var(--space-12) auto;
}

.examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.examples a {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--muted);
  text-decoration: none;
}

.symbols {
  padding: 0;
  list-style: none;
}

.symbols li {
  padding: var(--space-1) 0;
}

.match {
  margin: var(--space-4) 0;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.match h3 {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--font-weight);
}

.lines {
  width: 100%;
  border-collapse: collapse;
}

.lines td {
  padding: 0 var(--space-2);
  vertical-align: top;
}

.lines .number {
  width: 1%;
  text-align: right;
  color: var(--muted-foreground);
  user-select: none;
}

.lines .number a {
  text-decoration: none;
}

.lines .code {
  white-space: pre;
}

.lines .code a {
  text-decoration: underline dotted;
}

.lines tr.current {
  background: var(--muted);
}

mark {
  background: var(--accent);
  outline: var(--border-width) solid var(--border);
}

.file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-4);
  align-items: start;
}

.pane {
  overflow-x: auto;
}

.panel {
  position: sticky;
  top: calc(var(--control-h-sm) + var(--space-6));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}

.panel,
.panel code {
  overflow-wrap: anywhere;
}

.panel h4 {
  margin: var(--space-3) 0 var(--space-1);
  font-weight: var(--font-weight);
  color: var(--muted-foreground);
}

.references {
  margin: 0;
  padding: 0;
  list-style: none;
}

.signature {
  white-space: pre-wrap;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--muted);
}

.branches td {
  padding: var(--space-1) var(--space-3) var(--space-1) 0;
}