{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$canonical_source": "design-system/tokens.css",
  "$description": "Swivel design tokens in W3C DTCG-compatible JSON. The CSS file remains the runtime source of truth; this file mirrors every atomic value so Figma, Style Dictionary, Tailwind, iOS, Android, or any external tool can consume the same data. THEME: the system is dark by default — each token's $value is its DARK value, and tokens that differ in light mode carry the light value under $extensions.\"com.swivel.theme\".light. Every token also carries its runtime CSS custom property name under $extensions.\"com.swivel.cssVar\", so codegen can map a token path to the variable it emits without a hand-written alias table.",
  "color": {
    "switch": {
      "100": {
        "$value": "#A8F8FF",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--switch-100"
        }
      },
      "bg": {
        "$value": "#1F4A4E",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#D6FEFF"
          },
          "com.swivel.cssVar": "--switch-bg"
        }
      },
      "contrast": {
        "$value": "#00E5FF",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#0097A7"
          },
          "com.swivel.cssVar": "--switch-contrast"
        }
      }
    },
    "graphite": {
      "10": {
        "$value": "#2C3030",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#F0F1F0"
          },
          "com.swivel.cssVar": "--graphite-10"
        }
      },
      "20": {
        "$value": "#3A3E3D",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#D4D6D5"
          },
          "com.swivel.cssVar": "--graphite-20"
        }
      },
      "30": {
        "$value": "#4A4F4E",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#B8BAB9"
          },
          "com.swivel.cssVar": "--graphite-30"
        }
      },
      "40": {
        "$value": "#646866",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#9C9F9E"
          },
          "com.swivel.cssVar": "--graphite-40"
        }
      },
      "50": {
        "$value": "#808382",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#808382"
          },
          "com.swivel.cssVar": "--graphite-50"
        }
      },
      "60": {
        "$value": "#9C9F9E",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#646866"
          },
          "com.swivel.cssVar": "--graphite-60"
        }
      },
      "70": {
        "$value": "#B8BAB9",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#484C4B"
          },
          "com.swivel.cssVar": "--graphite-70"
        }
      },
      "80": {
        "$value": "#D4D6D5",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#2C3030"
          },
          "com.swivel.cssVar": "--graphite-80"
        }
      },
      "90": {
        "$value": "#F2F3F2",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#131514"
          },
          "com.swivel.cssVar": "--graphite-90"
        }
      },
      "base": {
        "$value": "#F2F3F2",
        "$type": "color",
        "$description": "Primary text on light, primary surface on dark.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#131514"
          },
          "com.swivel.cssVar": "--graphite-base"
        }
      },
      "bg": {
        "$value": "#B8BAB9",
        "$type": "color",
        "$description": "Default icon color.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#6B7170"
          },
          "com.swivel.cssVar": "--graphite-bg"
        }
      },
      "contrast": {
        "$value": "#131514",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#000000"
          },
          "com.swivel.cssVar": "--graphite-contrast"
        }
      }
    },
    "slate": {
      "10": {
        "$value": "#F0F3F7",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-10"
        }
      },
      "20": {
        "$value": "#DCE4ED",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-20"
        }
      },
      "30": {
        "$value": "#C8D5E3",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-30"
        }
      },
      "40": {
        "$value": "#B4C6D9",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-40"
        }
      },
      "50": {
        "$value": "#A0B7CF",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-50"
        }
      },
      "60": {
        "$value": "#8CA8C5",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-60"
        }
      },
      "70": {
        "$value": "#7899BB",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-70"
        }
      },
      "80": {
        "$value": "#6F8BA7",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-80"
        }
      },
      "90": {
        "$value": "#677F9F",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-90"
        }
      },
      "100": {
        "$value": "#637D9C",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-100"
        }
      },
      "110": {
        "$value": "#567088",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-110"
        }
      },
      "120": {
        "$value": "#496374",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-120"
        }
      },
      "130": {
        "$value": "#3C5660",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-130"
        }
      },
      "140": {
        "$value": "#2F494C",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-140"
        }
      },
      "150": {
        "$value": "#223C38",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--slate-150"
        }
      },
      "base": {
        "$value": "#7B9BBF",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#637D9C"
          },
          "com.swivel.cssVar": "--slate-base"
        }
      },
      "bg": {
        "$value": "#1E3048",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#DCE8F5"
          },
          "com.swivel.cssVar": "--slate-bg"
        }
      },
      "contrast": {
        "$value": "#A8C5E8",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#1A2D42"
          },
          "com.swivel.cssVar": "--slate-contrast"
        }
      },
      "bg-50": {
        "$value": "rgba(30, 48, 72, 0.5)",
        "$type": "color",
        "$description": "Translucent slate fill — 50% of slate.bg.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "rgba(220, 232, 245, 0.5)"
          },
          "com.swivel.cssVar": "--slate-bg-50"
        }
      }
    },
    "white": {
      "$value": "#E0E0E0",
      "$type": "color",
      "$extensions": {
        "com.swivel.theme": {
          "light": "#FFFFFF"
        },
        "com.swivel.cssVar": "--white"
      }
    },
    "white-contrast": {
      "$value": "#BDBDBD",
      "$type": "color",
      "$extensions": {
        "com.swivel.theme": {
          "light": "#9E9E9E"
        },
        "com.swivel.cssVar": "--white-contrast"
      }
    },
    "semantic": {
      "success": {
        "$value": "#43A047",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#2E7D32"
          },
          "com.swivel.cssVar": "--success"
        }
      },
      "success-bg": {
        "$value": "#1B3A1C",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#C8E6C9"
          },
          "com.swivel.cssVar": "--success-bg"
        }
      },
      "success-fg": {
        "$value": "#B9F6CA",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#0A3D0C"
          },
          "com.swivel.cssVar": "--success-fg"
        }
      },
      "warning": {
        "$value": "#FF8F00",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#D96600"
          },
          "com.swivel.cssVar": "--warning"
        },
        "$description": "Warning icons, fills and borders. Not for text in light mode — use warning-text."
      },
      "warning-text": {
        "$value": "#FF8F00",
        "$type": "color",
        "$description": "Warning-coloured text (labels, alert titles).",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#9A4800"
          },
          "com.swivel.cssVar": "--warning-text"
        }
      },
      "success-text": {
        "$value": "#66BB6A",
        "$type": "color",
        "$description": "Success-coloured text, e.g. a favourable delta in a table. Clears 4.5:1 on --surface-base and the --slate-bg row hover in both themes.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#256B29"
          },
          "com.swivel.cssVar": "--success-text"
        }
      },
      "error-text": {
        "$value": "#FF6F61",
        "$type": "color",
        "$description": "Error-coloured text, e.g. an unfavourable delta in a table. Clears 4.5:1 on --surface-base and the --slate-bg row hover in both themes.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#B71C1C"
          },
          "com.swivel.cssVar": "--error-text"
        }
      },
      "warning-bg": {
        "$value": "#3E2000",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#FFE0B2"
          },
          "com.swivel.cssVar": "--warning-bg"
        }
      },
      "warning-fg": {
        "$value": "#FFD54F",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#7A3300"
          },
          "com.swivel.cssVar": "--warning-fg"
        }
      },
      "info": {
        "$value": "#1E88E5",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#1976D2"
          },
          "com.swivel.cssVar": "--info"
        }
      },
      "info-bg": {
        "$value": "#12294D",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#BBDEFB"
          },
          "com.swivel.cssVar": "--info-bg"
        }
      },
      "info-fg": {
        "$value": "#90CAF9",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#0A2A6E"
          },
          "com.swivel.cssVar": "--info-fg"
        }
      },
      "error": {
        "$value": "#E53935",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#D32F2F"
          },
          "com.swivel.cssVar": "--error"
        }
      },
      "error-bg": {
        "$value": "#3B0000",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#FFCDD2"
          },
          "com.swivel.cssVar": "--error-bg"
        }
      },
      "error-fg": {
        "$value": "#FF8A80",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#5C0000"
          },
          "com.swivel.cssVar": "--error-fg"
        }
      },
      "btn-tonal-hover": {
        "$value": "#2A3F5C",
        "$type": "color",
        "$description": "Hover fill for tonal buttons.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#CDDCEC"
          },
          "com.swivel.cssVar": "--btn-tonal-hover"
        }
      },
      "btn-accent-hover": {
        "$value": "#C2FBFF",
        "$type": "color",
        "$description": "Hover fill for accent buttons.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#C2FBFF"
          },
          "com.swivel.cssVar": "--btn-accent-hover"
        }
      },
      "btn-danger-hover": {
        "$value": "#C62828",
        "$type": "color",
        "$description": "Hover fill for danger buttons.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#B71C1C"
          },
          "com.swivel.cssVar": "--btn-danger-hover"
        }
      },
      "btn-tonal-error-hover": {
        "$value": "#520A0A",
        "$type": "color",
        "$description": "Hover fill for tonal error buttons — one step darker than --error-bg.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#FFB3BA"
          },
          "com.swivel.cssVar": "--btn-tonal-error-hover"
        }
      }
    },
    "surface": {
      "base": {
        "$value": "#1E2120",
        "$type": "color",
        "$description": "Card, panel, row, tooltip fill.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#FFFFFF"
          },
          "com.swivel.cssVar": "--surface-base"
        }
      },
      "canvas": {
        "$value": "#131514",
        "$type": "color",
        "$description": "Page background.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#FCFCFC"
          },
          "com.swivel.cssVar": "--surface-canvas"
        }
      },
      "muted": {
        "$value": "#1A1C1B",
        "$type": "color",
        "$description": "Secondary fill — disabled, inset.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#F0F1F0"
          },
          "com.swivel.cssVar": "--surface-muted"
        }
      },
      "stroke": {
        "$value": "#2C3030",
        "$type": "color",
        "$description": "Hairline border on all surfaces.",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#D4D6D5"
          },
          "com.swivel.cssVar": "--surface-stroke"
        }
      },
      "input": {
        "$value": "#1E2020",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "#FFFFFF"
          },
          "com.swivel.cssVar": "--surface-input"
        }
      }
    },
    "viz": {
      "$description": "Categorical · 6 cool hues anchored on slate and switch.",
      "slate": {
        "$value": "{color.slate.base}",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--viz-slate"
        }
      },
      "switch": {
        "$value": "{color.switch.contrast}",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--viz-switch"
        }
      },
      "deep": {
        "$value": "oklch(0.48 0.070 250)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.30 0.060 252)"
          },
          "com.swivel.cssVar": "--viz-deep"
        }
      },
      "steel": {
        "$value": "oklch(0.66 0.100 232)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.55 0.090 235)"
          },
          "com.swivel.cssVar": "--viz-steel"
        }
      },
      "mist": {
        "$value": "oklch(0.86 0.045 218)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.78 0.045 220)"
          },
          "com.swivel.cssVar": "--viz-mist"
        }
      },
      "graphite": {
        "$value": "{color.graphite.70}",
        "$type": "color",
        "$extensions": {
          "com.swivel.cssVar": "--viz-graphite"
        }
      }
    },
    "viz-sequential-slate": {
      "1": {
        "$value": "oklch(0.25 0.020 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.96 0.015 252)"
          },
          "com.swivel.cssVar": "--seq-slate-1"
        }
      },
      "2": {
        "$value": "oklch(0.34 0.040 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.88 0.030 252)"
          },
          "com.swivel.cssVar": "--seq-slate-2"
        }
      },
      "3": {
        "$value": "oklch(0.44 0.060 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.78 0.045 252)"
          },
          "com.swivel.cssVar": "--seq-slate-3"
        }
      },
      "4": {
        "$value": "oklch(0.54 0.075 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.68 0.060 252)"
          },
          "com.swivel.cssVar": "--seq-slate-4"
        }
      },
      "5": {
        "$value": "oklch(0.64 0.085 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.56 0.060 252)"
          },
          "com.swivel.cssVar": "--seq-slate-5"
        }
      },
      "6": {
        "$value": "oklch(0.76 0.090 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.44 0.060 252)"
          },
          "com.swivel.cssVar": "--seq-slate-6"
        }
      },
      "7": {
        "$value": "oklch(0.88 0.075 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.30 0.050 252)"
          },
          "com.swivel.cssVar": "--seq-slate-7"
        }
      },
      "$description": "Sequential · slate ramp 1 (lightest) → 7 (darkest). Reversed in dark mode."
    },
    "viz-sequential-switch": {
      "1": {
        "$value": "oklch(0.25 0.030 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.96 0.020 200)"
          },
          "com.swivel.cssVar": "--seq-switch-1"
        }
      },
      "2": {
        "$value": "oklch(0.34 0.060 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.88 0.045 200)"
          },
          "com.swivel.cssVar": "--seq-switch-2"
        }
      },
      "3": {
        "$value": "oklch(0.44 0.085 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.78 0.070 200)"
          },
          "com.swivel.cssVar": "--seq-switch-3"
        }
      },
      "4": {
        "$value": "oklch(0.54 0.105 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.68 0.080 200)"
          },
          "com.swivel.cssVar": "--seq-switch-4"
        }
      },
      "5": {
        "$value": "oklch(0.64 0.115 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.58 0.085 200)"
          },
          "com.swivel.cssVar": "--seq-switch-5"
        }
      },
      "6": {
        "$value": "oklch(0.76 0.110 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.46 0.080 200)"
          },
          "com.swivel.cssVar": "--seq-switch-6"
        }
      },
      "7": {
        "$value": "oklch(0.88 0.090 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.32 0.070 200)"
          },
          "com.swivel.cssVar": "--seq-switch-7"
        }
      }
    },
    "viz-sequential-warm": {
      "1": {
        "$value": "oklch(0.25 0.030 50)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.96 0.020 60)"
          },
          "com.swivel.cssVar": "--seq-warm-1"
        }
      },
      "2": {
        "$value": "oklch(0.34 0.065 45)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.88 0.050 60)"
          },
          "com.swivel.cssVar": "--seq-warm-2"
        }
      },
      "3": {
        "$value": "oklch(0.44 0.095 40)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.80 0.080 60)"
          },
          "com.swivel.cssVar": "--seq-warm-3"
        }
      },
      "4": {
        "$value": "oklch(0.54 0.120 38)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.74 0.105 55)"
          },
          "com.swivel.cssVar": "--seq-warm-4"
        }
      },
      "5": {
        "$value": "oklch(0.64 0.135 40)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.66 0.130 45)"
          },
          "com.swivel.cssVar": "--seq-warm-5"
        }
      },
      "6": {
        "$value": "oklch(0.76 0.135 55)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.54 0.135 35)"
          },
          "com.swivel.cssVar": "--seq-warm-6"
        }
      },
      "7": {
        "$value": "oklch(0.88 0.115 75)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.40 0.120 30)"
          },
          "com.swivel.cssVar": "--seq-warm-7"
        }
      },
      "$description": "Use when slate would collide with brand chrome."
    },
    "viz-diverging": {
      "1": {
        "$value": "oklch(0.84 0.080 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.30 0.060 252)"
          },
          "com.swivel.cssVar": "--div-1"
        }
      },
      "2": {
        "$value": "oklch(0.72 0.085 248)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.42 0.075 250)"
          },
          "com.swivel.cssVar": "--div-2"
        }
      },
      "3": {
        "$value": "oklch(0.58 0.080 244)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.54 0.080 245)"
          },
          "com.swivel.cssVar": "--div-3"
        }
      },
      "4": {
        "$value": "oklch(0.42 0.060 240)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.68 0.060 240)"
          },
          "com.swivel.cssVar": "--div-4"
        }
      },
      "5": {
        "$value": "oklch(0.30 0.012 220)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.94 0.008 220)"
          },
          "com.swivel.cssVar": "--div-5"
        }
      },
      "6": {
        "$value": "oklch(0.46 0.080 212)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.78 0.060 215)"
          },
          "com.swivel.cssVar": "--div-6"
        }
      },
      "7": {
        "$value": "oklch(0.62 0.095 204)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.66 0.080 205)"
          },
          "com.swivel.cssVar": "--div-7"
        }
      },
      "8": {
        "$value": "oklch(0.78 0.100 200)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.54 0.090 198)"
          },
          "com.swivel.cssVar": "--div-8"
        }
      },
      "9": {
        "$value": "oklch(0.90 0.095 198)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.42 0.085 195)"
          },
          "com.swivel.cssVar": "--div-9"
        }
      },
      "$description": "Diverging · deep-slate ↔ switch-cyan, midpoint near page bg."
    },
    "viz-stack": {
      "1": {
        "$value": "oklch(0.50 0.075 252)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.38 0.075 252)"
          },
          "com.swivel.cssVar": "--stack-1"
        }
      },
      "2": {
        "$value": "oklch(0.56 0.080 248)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.46 0.080 250)"
          },
          "com.swivel.cssVar": "--stack-2"
        }
      },
      "3": {
        "$value": "oklch(0.62 0.080 240)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.54 0.080 245)"
          },
          "com.swivel.cssVar": "--stack-3"
        }
      },
      "4": {
        "$value": "oklch(0.66 0.080 232)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.60 0.080 240)"
          },
          "com.swivel.cssVar": "--stack-4"
        }
      },
      "5": {
        "$value": "oklch(0.70 0.082 224)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.64 0.080 232)"
          },
          "com.swivel.cssVar": "--stack-5"
        }
      },
      "6": {
        "$value": "oklch(0.74 0.082 216)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.68 0.080 224)"
          },
          "com.swivel.cssVar": "--stack-6"
        }
      },
      "7": {
        "$value": "oklch(0.78 0.085 210)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.72 0.082 216)"
          },
          "com.swivel.cssVar": "--stack-7"
        }
      },
      "8": {
        "$value": "oklch(0.82 0.085 206)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.76 0.085 210)"
          },
          "com.swivel.cssVar": "--stack-8"
        }
      },
      "9": {
        "$value": "oklch(0.86 0.085 202)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.82 0.085 204)"
          },
          "com.swivel.cssVar": "--stack-9"
        }
      },
      "10": {
        "$value": "oklch(0.90 0.080 198)",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "oklch(0.88 0.085 200)"
          },
          "com.swivel.cssVar": "--stack-10"
        }
      },
      "$description": "Many-series stack · 10-step slate → switch gradient.",
      "other": {
        "$value": "{color.graphite.70}",
        "$type": "color",
        "$extensions": {
          "com.swivel.theme": {
            "light": "{color.graphite.20}"
          },
          "com.swivel.cssVar": "--stack-other"
        }
      }
    },
    "interactive": {
      "$description": "Interactive text. A link must clear 4.5:1 at 14px/400 in both themes; --slate-100 is theme-fixed (#637D9C in light and dark alike) and lands at 4.25:1 light / 3.82:1 dark, under AA in both. Dark mode uses switch-cyan instead of slate — the brand accent reads brighter against dark surfaces, where slate recedes too close to the graphite scale.",
      "link": {
        "$value": "#00E5FF",
        "$type": "color",
        "$description": "Link and primary-name text. Dark value (switch-contrast); light is #496374 (slate-120). Measured 10.55:1 card / 8.69:1 row-hover dark, 6.32:1 / 5.09:1 light.",
        "$extensions": {
          "com.swivel.cssVar": "--link",
          "com.swivel.theme": {
            "light": "#496374"
          },
          "com.swivel.alias": {
            "dark": "--switch-contrast",
            "light": "--slate-120"
          }
        }
      },
      "link-hover": {
        "$value": "#A8F8FF",
        "$type": "color",
        "$description": "Link hover. Dark value (switch-100); light is #3C5660 (slate-130). Measured 13.56:1 card / 11.16:1 row-hover dark, 7.80:1 / 6.28:1 light.",
        "$extensions": {
          "com.swivel.cssVar": "--link-hover",
          "com.swivel.theme": {
            "light": "#3C5660"
          },
          "com.swivel.alias": {
            "dark": "--switch-100",
            "light": "--slate-130"
          }
        }
      }
    },
    "cta": {
      "$description": "Primary button fill. Dark mode uses switch-cyan, matching --link; ink stays graphite-contrast rather than white because switch-contrast is bright in both themes.",
      "btn-primary-bg": {
        "$value": "#00E5FF",
        "$type": "color",
        "$description": "Dark value (switch-contrast); light is slate-100 (#637D9C).",
        "$extensions": {
          "com.swivel.cssVar": "--btn-primary-bg",
          "com.swivel.theme": {
            "light": "#637D9C"
          },
          "com.swivel.alias": {
            "dark": "--switch-contrast",
            "light": "--slate-100"
          }
        }
      },
      "btn-primary-bg-hover": {
        "$value": "#A8F8FF",
        "$type": "color",
        "$description": "Dark value (switch-100); light is slate-110 (#567088).",
        "$extensions": {
          "com.swivel.cssVar": "--btn-primary-bg-hover",
          "com.swivel.theme": {
            "light": "#567088"
          },
          "com.swivel.alias": {
            "dark": "--switch-100",
            "light": "--slate-110"
          }
        }
      },
      "btn-primary-fg": {
        "$value": "#131514",
        "$type": "color",
        "$description": "Dark value (graphite-contrast, near-black); light is white. Switch-cyan fill needs dark ink in both themes once it becomes the CTA color in dark mode.",
        "$extensions": {
          "com.swivel.cssVar": "--btn-primary-fg",
          "com.swivel.theme": {
            "light": "#FFFFFF"
          },
          "com.swivel.alias": {
            "dark": "--graphite-contrast",
            "light": "--white"
          }
        }
      }
    }
  },
  "size": {
    "space": {
      "sm": {
        "$value": "4px",
        "$type": "dimension",
        "$description": "Tight gaps, icon spacing, vertical button padding.",
        "$extensions": {
          "com.swivel.cssVar": "--space-sm"
        }
      },
      "md": {
        "$value": "8px",
        "$type": "dimension",
        "$description": "Nav entries, section padding.",
        "$extensions": {
          "com.swivel.cssVar": "--space-md"
        }
      },
      "lg": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Horizontal button padding, alert/dialog inset.",
        "$extensions": {
          "com.swivel.cssVar": "--space-lg"
        }
      },
      "xl": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Card padding, input horizontal inset.",
        "$extensions": {
          "com.swivel.cssVar": "--space-xl"
        }
      },
      "xxl": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Page/section header top padding.",
        "$extensions": {
          "com.swivel.cssVar": "--space-xxl"
        }
      },
      "3xl": {
        "$value": "24px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--space-3xl"
        }
      },
      "4xl": {
        "$value": "32px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--space-4xl"
        }
      },
      "5xl": {
        "$value": "40px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--space-5xl"
        }
      },
      "section": {
        "$value": "64px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--space-section"
        }
      }
    },
    "control-height": {
      "sm": {
        "$value": "24px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--control-h-sm"
        }
      },
      "default": {
        "$value": "34px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--control-h"
        }
      },
      "lg": {
        "$value": "40px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--control-h-lg"
        }
      }
    }
  },
  "icon": {
    "2xs": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Badge and chip glyphs.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-2xs"
      }
    },
    "xs": {
      "$value": "14px",
      "$type": "dimension",
      "$description": "Header sort carets, avatar glyphs.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-xs"
      }
    },
    "sm": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Inline marks beside text, e.g. verified-mark.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-sm"
      }
    },
    "md": {
      "$value": "18px",
      "$type": "dimension",
      "$description": "Default UI icon: buttons, pagination, popover rows.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-md"
      }
    },
    "lg": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Table toolbar, status glyphs, bare icon columns.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-lg"
      }
    },
    "xl": {
      "$value": "22px",
      "$type": "dimension",
      "$description": "Alerts, status icons, header menu.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-xl"
      }
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Material Symbols default.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-2xl"
      }
    },
    "3xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Empty-state and panel icons.",
      "$extensions": {
        "com.swivel.cssVar": "--icon-3xl"
      }
    }
  },
  "radius": {
    "none": {
      "$value": "0",
      "$type": "dimension",
      "$extensions": {
        "com.swivel.cssVar": "--radius-none"
      }
    },
    "xs": {
      "$value": "2px",
      "$type": "dimension",
      "$extensions": {
        "com.swivel.cssVar": "--radius-xs"
      }
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Default UI radius.",
      "$extensions": {
        "com.swivel.cssVar": "--radius-sm"
      }
    },
    "md": {
      "$value": "6px",
      "$type": "dimension",
      "$extensions": {
        "com.swivel.cssVar": "--radius-md"
      }
    },
    "lg": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Max on cards.",
      "$extensions": {
        "com.swivel.cssVar": "--radius-lg"
      }
    },
    "xl": {
      "$value": "12px",
      "$type": "dimension",
      "$extensions": {
        "com.swivel.cssVar": "--radius-xl"
      }
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Pills, data badges.",
      "$extensions": {
        "com.swivel.cssVar": "--radius-full"
      }
    }
  },
  "motion": {
    "duration": {
      "instant": {
        "$value": "80ms",
        "$type": "duration",
        "$description": "Tooltip show; state flips that should feel instantaneous.",
        "$extensions": {
          "com.swivel.cssVar": "--motion-instant"
        }
      },
      "fast": {
        "$value": "120ms",
        "$type": "duration",
        "$description": "Hover, focus, small color/opacity shifts.",
        "$extensions": {
          "com.swivel.cssVar": "--motion-fast"
        }
      },
      "base": {
        "$value": "200ms",
        "$type": "duration",
        "$description": "The default — most UI transitions.",
        "$extensions": {
          "com.swivel.cssVar": "--motion-base"
        }
      },
      "slow": {
        "$value": "240ms",
        "$type": "duration",
        "$description": "Expand/collapse, drawer slide, sheet/modal.",
        "$extensions": {
          "com.swivel.cssVar": "--motion-slow"
        }
      },
      "deliberate": {
        "$value": "360ms",
        "$type": "duration",
        "$description": "Attention-getting changes, value count-ups, hero reveals.",
        "$extensions": {
          "com.swivel.cssVar": "--motion-deliberate"
        }
      }
    },
    "easing": {
      "standard": {
        "$value": [
          0.2,
          0.7,
          0.2,
          1
        ],
        "$type": "cubicBezier",
        "$description": "Enter + exit — the default.",
        "$extensions": {
          "com.swivel.cssVar": "--ease-standard"
        }
      },
      "emphasized": {
        "$value": [
          0.3,
          0,
          0,
          1
        ],
        "$type": "cubicBezier",
        "$description": "Large surface transitions.",
        "$extensions": {
          "com.swivel.cssVar": "--ease-emphasized"
        }
      },
      "enter": {
        "$value": [
          0,
          0,
          0,
          1
        ],
        "$type": "cubicBezier",
        "$description": "Element appearing.",
        "$extensions": {
          "com.swivel.cssVar": "--ease-enter"
        }
      },
      "exit": {
        "$value": [
          0.3,
          0,
          1,
          1
        ],
        "$type": "cubicBezier",
        "$description": "Element leaving.",
        "$extensions": {
          "com.swivel.cssVar": "--ease-exit"
        }
      },
      "linear": {
        "$value": [
          0,
          0,
          1,
          1
        ],
        "$type": "cubicBezier",
        "$description": "Progress bars, scrub.",
        "$extensions": {
          "com.swivel.cssVar": "--ease-linear"
        }
      }
    }
  },
  "elevation": {
    "1": {
      "$type": "shadow",
      "$extensions": {
        "com.swivel.cssVar": "--elev-1"
      },
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "2px",
          "spread": "0",
          "color": "rgba(0,0,0,0.30)"
        },
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "3px",
          "spread": "1px",
          "color": "rgba(0,0,0,0.15)"
        }
      ]
    },
    "2": {
      "$type": "shadow",
      "$extensions": {
        "com.swivel.cssVar": "--elev-2"
      },
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "2px",
          "spread": "0",
          "color": "rgba(0,0,0,0.30)"
        },
        {
          "offsetX": "0",
          "offsetY": "2px",
          "blur": "6px",
          "spread": "2px",
          "color": "rgba(0,0,0,0.15)"
        }
      ]
    },
    "3": {
      "$type": "shadow",
      "$extensions": {
        "com.swivel.cssVar": "--elev-3"
      },
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "1px",
          "blur": "3px",
          "spread": "0",
          "color": "rgba(0,0,0,0.30)"
        },
        {
          "offsetX": "0",
          "offsetY": "4px",
          "blur": "8px",
          "spread": "3px",
          "color": "rgba(0,0,0,0.15)"
        }
      ]
    },
    "$description": "Material 3 light, level 1 baseline. Reserved for floating layers — menus, modals, popovers. No drop shadows on inline cards.",
    "modal": {
      "$type": "shadow",
      "$extensions": {
        "com.swivel.cssVar": "--elev-modal"
      },
      "$value": [
        {
          "offsetX": "0",
          "offsetY": "6px",
          "blur": "10px",
          "spread": "4px",
          "color": "rgba(0,0,0,0.15)"
        },
        {
          "offsetX": "0",
          "offsetY": "2px",
          "blur": "3px",
          "spread": "0",
          "color": "rgba(0,0,0,0.30)"
        }
      ]
    }
  },
  "focus-ring": {
    "$type": "shadow",
    "$extensions": {
      "com.swivel.cssVar": "--focus-ring"
    },
    "$value": [
      {
        "offsetX": "0",
        "offsetY": "0",
        "blur": "0",
        "spread": "3px",
        "color": "rgba(168,248,255,0.4)"
      }
    ],
    "$description": "Standard focus outline. Switch-cyan glow at 40% opacity, 3px spread."
  },
  "typography": {
    "font-family": {
      "display": {
        "$value": [
          "Avantt",
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "Headlines and display moments.",
        "$extensions": {
          "com.swivel.cssVar": "--font-display"
        }
      },
      "body": {
        "$value": [
          "Antarctica",
          "Inter",
          "-apple-system",
          "BlinkMacSystemFont",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "Body, UI, and labels.",
        "$extensions": {
          "com.swivel.cssVar": "--font-body"
        }
      },
      "mono": {
        "$value": [
          "JetBrains Mono",
          "ui-monospace",
          "SF Mono",
          "Menlo",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "Code, data, mono UI strings.",
        "$extensions": {
          "com.swivel.cssVar": "--font-mono"
        }
      }
    },
    "font-size": {
      "display": {
        "$value": "72px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-display"
        }
      },
      "h1": {
        "$value": "48px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-h1"
        }
      },
      "h2": {
        "$value": "36px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-h2"
        }
      },
      "h3": {
        "$value": "28px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-h3"
        }
      },
      "h4": {
        "$value": "22px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-h4"
        }
      },
      "body-l": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Lead body, alert/dialog titles.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-body-l"
        }
      },
      "body": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Default body.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-body"
        }
      },
      "body-s": {
        "$value": "12px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-body-s"
        }
      },
      "body-label": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Field labels, data keys.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-body-label"
        }
      },
      "body-caption": {
        "$value": "10px",
        "$type": "dimension",
        "$description": "Timestamps, version strings.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-body-caption"
        }
      },
      "ui-metric": {
        "$value": "28px",
        "$type": "dimension",
        "$description": "KPI readouts.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-metric"
        }
      },
      "ui-page-header": {
        "$value": "21px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-page-header"
        }
      },
      "ui-title": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Alert/dialog titles.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-title"
        }
      },
      "ui-default": {
        "$value": "14px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-default"
        }
      },
      "ui-dense": {
        "$value": "13px",
        "$type": "dimension",
        "$description": "Dense body text: menu items, dates, subtitles.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-dense"
        }
      },
      "ui-caps": {
        "$value": "13px",
        "$type": "dimension",
        "$description": "Button labels, card titles, tabs — UPPERCASE.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-caps"
        }
      },
      "ui-nav": {
        "$value": "13px",
        "$type": "dimension",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-nav"
        }
      },
      "ui-small": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Tooltips, helper.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-small"
        }
      },
      "ui-xs": {
        "$value": "11px",
        "$type": "dimension",
        "$description": "Chips, badges, small buttons, mono IDs and stamps.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-xs"
        }
      },
      "ui-tag": {
        "$value": "10px",
        "$type": "dimension",
        "$description": "Badges, status chips.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-tag"
        }
      },
      "ui-section": {
        "$value": "10px",
        "$type": "dimension",
        "$description": "ALL-CAPS section dividers.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-section"
        }
      },
      "ui-code": {
        "$value": "10px",
        "$type": "dimension",
        "$description": "Mono ID chips, inline code.",
        "$extensions": {
          "com.swivel.cssVar": "--fs-ui-code"
        }
      },
      "axis-tick": {
        "$value": "{typography.font-size.ui-small}",
        "$type": "dimension",
        "$description": "Chart tick + category labels and in-chart value labels. Alias of UI/Small (12px).",
        "$extensions": {
          "com.swivel.cssVar": "--fs-axis-tick"
        }
      },
      "axis-title": {
        "$value": "{typography.font-size.ui-caps}",
        "$type": "dimension",
        "$description": "Rotated uppercase value-axis title. Alias of UI/Caps (13px).",
        "$extensions": {
          "com.swivel.cssVar": "--fs-axis-title"
        }
      }
    },
    "letter-spacing": {
      "headline": {
        "$value": "0.04em",
        "$type": "string",
        "$description": "Headline.* + Body.* axes per Figma.",
        "$extensions": {
          "com.swivel.cssVar": "--ls-headline"
        }
      },
      "ui-tracked": {
        "$value": "0.04em",
        "$type": "string",
        "$description": "Caps / Tag / Nav / Section labels.",
        "$extensions": {
          "com.swivel.cssVar": "--ls-ui-tracked"
        }
      }
    },
    "line-height": {
      "tight": {
        "$value": "0.95",
        "$type": "number",
        "$description": "Figma 95% line-height.",
        "$extensions": {
          "com.swivel.cssVar": "--lh-tight"
        }
      }
    }
  }
}