{
  "$description": "CyberSkill Design System — design tokens in W3C DTCG format (design-tokens.github.io). Importable by Tokens Studio for Figma, Style Dictionary, and other DTCG-aware tools. Token keys are the literal CSS custom-property names for lossless round-trip to styles.css. Generated from tokens/*.css via tokens/tokens.json — regenerate after any token change.",
  "$extensions": {
    "com.cyberskill": {
      "system": "CyberSkill Design System",
      "version": "4.0.0",
      "generated": "2026-07-20",
      "source": "tokens/tokens.json",
      "note": "Scope overrides (dark/system theme · 15 element×variant packs · expressions · densities — compact is @media (pointer: fine)-gated in CSS) are carried under $extensions.overrides keyed by CSS selector — apply the matching selector on :root/ancestor to activate.",
      "overrides": {
        "themes": {
          "dark": {
            "--cs-color-surface-page": "#1a1108",
            "--cs-color-surface-panel": "#221710",
            "--cs-color-surface-raised": "#2b1e14",
            "--cs-color-text-primary": "#f5ead9",
            "--cs-color-text-inverse": "#1a1108",
            "--cs-color-text-accent": "#f4ba17",
            "--cs-color-text-muted": "#c9b7a3",
            "--cs-color-semantic-success": "#4ADE80",
            "--cs-color-semantic-danger": "#F87171",
            "--cs-color-semantic-warning": "#FBBF24",
            "--cs-color-semantic-info": "#7CB2FB",
            "--cs-color-border-default": "#4a3a2c",
            "--cs-color-link": "#f4ba17",
            "--cs-color-link-hover": "#f5ead9",
            "--cs-component-button-primary-bg": "#f4ba17",
            "--cs-component-button-primary-fg": "#1a1108",
            "--cs-component-textfield-border-default": "#5a4636",
            "--cs-shadow-xs": "0 1px 2px rgba(0, 0, 0, 0.40)",
            "--cs-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42)",
            "--cs-shadow-md": "0 12px 30px rgba(0, 0, 0, 0.50)",
            "--cs-shadow-lg": "0 20px 60px rgba(0, 0, 0, 0.55)",
            "--cs-shadow-xl": "0 24px 80px rgba(0, 0, 0, 0.62)"
          },
          "system": {
            "--cs-color-surface-page": "#1a1108",
            "--cs-color-surface-panel": "#221710",
            "--cs-color-surface-raised": "#2b1e14",
            "--cs-color-text-primary": "#f5ead9",
            "--cs-color-text-inverse": "#1a1108",
            "--cs-color-text-accent": "#f4ba17",
            "--cs-color-text-muted": "#c9b7a3",
            "--cs-color-semantic-success": "#4ADE80",
            "--cs-color-semantic-danger": "#F87171",
            "--cs-color-semantic-warning": "#FBBF24",
            "--cs-color-semantic-info": "#7CB2FB",
            "--cs-color-border-default": "#4a3a2c",
            "--cs-color-link": "#f4ba17",
            "--cs-color-link-hover": "#f5ead9",
            "--cs-component-button-primary-bg": "#f4ba17",
            "--cs-component-button-primary-fg": "#1a1108",
            "--cs-component-textfield-border-default": "#5a4636",
            "--cs-shadow-xs": "0 1px 2px rgba(0, 0, 0, 0.40)",
            "--cs-shadow-sm": "0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42)",
            "--cs-shadow-md": "0 12px 30px rgba(0, 0, 0, 0.50)",
            "--cs-shadow-lg": "0 20px 60px rgba(0, 0, 0, 0.55)",
            "--cs-shadow-xl": "0 24px 80px rgba(0, 0, 0, 0.62)"
          }
        },
        "elements": {
          "tho": {
            "--cs-accent": "#F4BA17",
            "--cs-accent-strong": "#B98200",
            "--cs-accent-bright": "#F4BA17",
            "--cs-accent-on": "#45210E",
            "--cs-accent-tint": "#FBF4E9",
            "--cs-accent-ink": "#45210E",
            "--cs-accent-glow": "rgba(244, 186, 23, 0.5)",
            "--cs-accent-grad-a": "#F4BA17",
            "--cs-accent-grad-b": "#C77B4A"
          },
          "tho.clay": {
            "--cs-accent": "#C77B4A",
            "--cs-accent-strong": "#8F5230",
            "--cs-accent-bright": "#EDBF9D",
            "--cs-accent-on": "#2E1607",
            "--cs-accent-tint": "#F8EDE4",
            "--cs-accent-ink": "#2E1607",
            "--cs-accent-glow": "rgba(199, 123, 74, 0.5)",
            "--cs-accent-grad-a": "#C77B4A",
            "--cs-accent-grad-b": "#F4BA17",
            "--cs-color-text-accent": "#8F5230",
            "--cs-color-link": "#8F5230"
          },
          "tho.sand": {
            "--cs-accent": "#E4C98F",
            "--cs-accent-strong": "#A98B4E",
            "--cs-accent-bright": "#EFDCB2",
            "--cs-accent-on": "#3A2A10",
            "--cs-accent-tint": "#FAF3E3",
            "--cs-accent-ink": "#3A2A10",
            "--cs-accent-glow": "rgba(228, 201, 143, 0.55)",
            "--cs-accent-grad-a": "#E4C98F",
            "--cs-accent-grad-b": "#F4BA17",
            "--cs-color-text-accent": "#8A6F3C",
            "--cs-color-link": "#8A6F3C"
          },
          "hoa": {
            "--cs-accent": "#E0632B",
            "--cs-accent-strong": "#A93E14",
            "--cs-accent-bright": "#F6A26B",
            "--cs-accent-on": "#231007",
            "--cs-accent-tint": "#FBEADF",
            "--cs-accent-ink": "#231007",
            "--cs-accent-glow": "rgba(224, 99, 43, 0.5)",
            "--cs-accent-grad-a": "#E0632B",
            "--cs-accent-grad-b": "#F4BA17",
            "--cs-color-text-accent": "#A93E14",
            "--cs-color-link": "#A93E14"
          },
          "hoa.lava": {
            "--cs-accent": "#C43D1F",
            "--cs-accent-strong": "#7E1F0E",
            "--cs-accent-bright": "#F6AC85",
            "--cs-accent-on": "#1D0B05",
            "--cs-accent-tint": "#FAE5DC",
            "--cs-accent-ink": "#1D0B05",
            "--cs-accent-glow": "rgba(196, 61, 31, 0.55)",
            "--cs-accent-grad-a": "#C43D1F",
            "--cs-accent-grad-b": "#E0632B",
            "--cs-color-text-accent": "#9B2D14",
            "--cs-color-link": "#9B2D14"
          },
          "hoa.plasma": {
            "--cs-accent": "#E8506E",
            "--cs-accent-strong": "#B02348",
            "--cs-accent-bright": "#F7A8B8",
            "--cs-accent-on": "#200812",
            "--cs-accent-tint": "#FBE6EB",
            "--cs-accent-ink": "#200812",
            "--cs-accent-glow": "rgba(232, 80, 110, 0.5)",
            "--cs-accent-grad-a": "#E8506E",
            "--cs-accent-grad-b": "#F08A52",
            "--cs-color-text-accent": "#B02348",
            "--cs-color-link": "#B02348"
          },
          "thuy": {
            "--cs-accent": "#4E8E9B",
            "--cs-accent-strong": "#2F5E6B",
            "--cs-accent-bright": "#A6D0DA",
            "--cs-accent-on": "#0E1D20",
            "--cs-accent-tint": "#E6F1F2",
            "--cs-accent-ink": "#0E1D20",
            "--cs-accent-glow": "rgba(78, 142, 155, 0.5)",
            "--cs-accent-grad-a": "#4E8E9B",
            "--cs-accent-grad-b": "#7A9B57",
            "--cs-color-text-accent": "#2F5E6B",
            "--cs-color-link": "#2F5E6B"
          },
          "thuy.ocean": {
            "--cs-accent": "#2E5E7E",
            "--cs-accent-strong": "#1C3E56",
            "--cs-accent-bright": "#A9CCE0",
            "--cs-accent-on": "#0B161E",
            "--cs-accent-tint": "#E4EEF4",
            "--cs-accent-ink": "#0B161E",
            "--cs-accent-glow": "rgba(46, 94, 126, 0.55)",
            "--cs-accent-grad-a": "#2E5E7E",
            "--cs-accent-grad-b": "#4E8E9B",
            "--cs-color-text-accent": "#1C3E56",
            "--cs-color-link": "#1C3E56"
          },
          "thuy.mist": {
            "--cs-accent": "#A7C4C9",
            "--cs-accent-strong": "#5E7F85",
            "--cs-accent-bright": "#C4DADD",
            "--cs-accent-on": "#16262A",
            "--cs-accent-tint": "#F0F6F7",
            "--cs-accent-ink": "#16262A",
            "--cs-accent-glow": "rgba(167, 196, 201, 0.55)",
            "--cs-accent-grad-a": "#A7C4C9",
            "--cs-accent-grad-b": "#4E8E9B",
            "--cs-color-text-accent": "#4A686E",
            "--cs-color-link": "#4A686E"
          },
          "moc": {
            "--cs-accent": "#7A9B57",
            "--cs-accent-strong": "#4C6B35",
            "--cs-accent-bright": "#A9C177",
            "--cs-accent-on": "#18200F",
            "--cs-accent-tint": "#EEF3E2",
            "--cs-accent-ink": "#18200F",
            "--cs-accent-glow": "rgba(122, 155, 87, 0.5)",
            "--cs-accent-grad-a": "#7A9B57",
            "--cs-accent-grad-b": "#E0632B",
            "--cs-color-text-accent": "#4C6B35",
            "--cs-color-link": "#4C6B35"
          },
          "moc.bamboo": {
            "--cs-accent": "#A9C177",
            "--cs-accent-strong": "#6B8442",
            "--cs-accent-bright": "#C4D69B",
            "--cs-accent-on": "#1C240F",
            "--cs-accent-tint": "#F3F7E8",
            "--cs-accent-ink": "#1C240F",
            "--cs-accent-glow": "rgba(169, 193, 119, 0.55)",
            "--cs-accent-grad-a": "#A9C177",
            "--cs-accent-grad-b": "#7A9B57",
            "--cs-color-text-accent": "#5B7237",
            "--cs-color-link": "#5B7237"
          },
          "moc.forest": {
            "--cs-accent": "#3E5A2E",
            "--cs-accent-strong": "#263A1B",
            "--cs-accent-bright": "#B3CE9B",
            "--cs-accent-on": "#101708",
            "--cs-accent-tint": "#E9EFE1",
            "--cs-accent-ink": "#101708",
            "--cs-accent-glow": "rgba(62, 90, 46, 0.55)",
            "--cs-accent-grad-a": "#3E5A2E",
            "--cs-accent-grad-b": "#7A9B57",
            "--cs-color-text-accent": "#31481F",
            "--cs-color-link": "#31481F"
          },
          "kim": {
            "--cs-accent": "#BFB29B",
            "--cs-accent-strong": "#7E7160",
            "--cs-accent-bright": "#D8CCB6",
            "--cs-accent-on": "#221C12",
            "--cs-accent-tint": "#F3EFE6",
            "--cs-accent-ink": "#221C12",
            "--cs-accent-glow": "rgba(191, 178, 155, 0.5)",
            "--cs-accent-grad-a": "#BFB29B",
            "--cs-accent-grad-b": "#4E8E9B",
            "--cs-color-text-accent": "#6E6151",
            "--cs-color-link": "#6E6151"
          },
          "kim.steel": {
            "--cs-accent": "#9FA3A3",
            "--cs-accent-strong": "#63696B",
            "--cs-accent-bright": "#C2C6C6",
            "--cs-accent-on": "#191D1E",
            "--cs-accent-tint": "#EFF1F1",
            "--cs-accent-ink": "#191D1E",
            "--cs-accent-glow": "rgba(159, 163, 163, 0.5)",
            "--cs-accent-grad-a": "#9FA3A3",
            "--cs-accent-grad-b": "#BFB29B",
            "--cs-color-text-accent": "#565C5E",
            "--cs-color-link": "#565C5E"
          },
          "kim.titanium": {
            "--cs-accent": "#8A7F72",
            "--cs-accent-strong": "#56504A",
            "--cs-accent-bright": "#D9CFC0",
            "--cs-accent-on": "#171310",
            "--cs-accent-tint": "#EFEBE5",
            "--cs-accent-ink": "#171310",
            "--cs-accent-glow": "rgba(138, 127, 114, 0.5)",
            "--cs-accent-grad-a": "#8A7F72",
            "--cs-accent-grad-b": "#BFB29B",
            "--cs-color-text-accent": "#56504A",
            "--cs-color-link": "#56504A"
          }
        },
        "expressions": {
          "solid": {
            "--cs-radius-md": "6px",
            "--cs-radius-lg": "10px",
            "--cs-component-button-radius": "6px",
            "--cs-shadow-xs": "0 0 0 rgba(0,0,0,0)",
            "--cs-shadow-sm": "0 1px 2px rgba(69,33,14,0.05)",
            "--cs-shadow-md": "0 2px 6px rgba(69,33,14,0.08)",
            "--cs-shadow-lg": "0 4px 12px rgba(69,33,14,0.10)",
            "--cs-shadow-xl": "0 8px 24px rgba(69,33,14,0.12)",
            "--cs-glass-whisper-blur": "0px",
            "--cs-glass-light-blur": "0px",
            "--cs-glass-standard-blur": "0px",
            "--cs-glass-heavy-blur": "0px",
            "--cs-glass-whisper-opacity": "100%",
            "--cs-glass-light-opacity": "100%",
            "--cs-glass-standard-opacity": "100%",
            "--cs-glass-heavy-opacity": "100%"
          },
          "paper": {
            "--cs-radius-sm": "3px",
            "--cs-radius-md": "4px",
            "--cs-radius-lg": "6px",
            "--cs-component-button-radius": "4px",
            "--cs-shadow-xs": "0 0 0 rgba(0,0,0,0)",
            "--cs-shadow-sm": "0 0 0 rgba(0,0,0,0)",
            "--cs-shadow-md": "0 0 0 rgba(0,0,0,0)",
            "--cs-shadow-lg": "0 0 0 rgba(0,0,0,0)",
            "--cs-shadow-xl": "0 0 0 rgba(0,0,0,0)",
            "--cs-glass-whisper-blur": "0px",
            "--cs-glass-light-blur": "0px",
            "--cs-glass-standard-blur": "0px",
            "--cs-glass-heavy-blur": "0px",
            "--cs-glass-whisper-opacity": "100%",
            "--cs-glass-light-opacity": "100%",
            "--cs-glass-standard-opacity": "100%",
            "--cs-glass-heavy-opacity": "100%",
            "--cs-duration-base": "160ms",
            "--cs-duration-slow": "240ms"
          },
          "soft": {
            "--cs-radius-sm": "6px",
            "--cs-radius-md": "12px",
            "--cs-radius-lg": "22px",
            "--cs-component-button-radius": "12px",
            "--cs-shadow-xs": "0 2px 6px rgba(69,33,14,0.05)",
            "--cs-shadow-sm": "0 6px 18px rgba(69,33,14,0.06), 0 16px 40px rgba(69,33,14,0.07)",
            "--cs-shadow-md": "0 18px 44px rgba(31,19,11,0.14)",
            "--cs-shadow-lg": "0 26px 70px rgba(69,33,14,0.14)",
            "--cs-shadow-xl": "0 30px 90px rgba(31,19,11,0.20)",
            "--cs-duration-base": "240ms",
            "--cs-duration-slow": "380ms"
          },
          "dense": {
            "--cs-radius-sm": "3px",
            "--cs-radius-md": "6px",
            "--cs-radius-lg": "10px",
            "--cs-component-button-radius": "6px",
            "--cs-component-button-sm-paddingY": "5px",
            "--cs-component-button-sm-paddingX": "10px",
            "--cs-component-button-sm-minHeight": "44px",
            "--cs-component-button-md-paddingY": "12px",
            "--cs-component-button-md-paddingX": "14px",
            "--cs-component-button-md-minHeight": "44px",
            "--cs-component-button-lg-paddingY": "10px",
            "--cs-component-button-lg-paddingX": "18px",
            "--cs-component-button-lg-minHeight": "48px",
            "--cs-component-textfield-paddingY": "10px",
            "--cs-component-textfield-paddingX": "10px",
            "--cs-component-textfield-minHeight": "44px",
            "--cs-shadow-sm": "0 1px 2px rgba(69,33,14,0.05)",
            "--cs-shadow-md": "0 2px 8px rgba(69,33,14,0.10)",
            "--cs-glass-whisper-blur": "0px",
            "--cs-glass-light-blur": "0px",
            "--cs-glass-standard-blur": "0px",
            "--cs-glass-heavy-blur": "0px",
            "--cs-glass-whisper-opacity": "100%",
            "--cs-glass-light-opacity": "100%",
            "--cs-glass-standard-opacity": "100%",
            "--cs-glass-heavy-opacity": "100%",
            "--cs-duration-fast": "100ms",
            "--cs-duration-base": "150ms"
          },
          "luxe": {
            "--cs-radius-sm": "6px",
            "--cs-radius-md": "10px",
            "--cs-radius-lg": "18px",
            "--cs-component-button-radius": "999px",
            "--cs-color-border-default": "#EEE3D0",
            "--cs-shadow-xs": "0 2px 10px rgba(69,33,14,0.06)",
            "--cs-shadow-sm": "0 10px 34px rgba(69,33,14,0.10)",
            "--cs-shadow-md": "0 22px 60px rgba(31,19,11,0.16)",
            "--cs-shadow-lg": "0 32px 90px rgba(69,33,14,0.18)",
            "--cs-shadow-xl": "0 40px 120px rgba(31,19,11,0.24)",
            "--cs-glass-whisper-blur": "12px",
            "--cs-glass-light-blur": "18px",
            "--cs-glass-standard-blur": "24px",
            "--cs-glass-heavy-blur": "32px",
            "--cs-glass-whisper-saturate": "120%",
            "--cs-glass-light-saturate": "140%",
            "--cs-glass-standard-saturate": "160%",
            "--cs-glass-heavy-saturate": "190%",
            "--cs-duration-base": "280ms",
            "--cs-duration-slow": "460ms"
          },
          "bold": {
            "--cs-radius-sm": "2px",
            "--cs-radius-md": "4px",
            "--cs-radius-lg": "6px",
            "--cs-component-button-radius": "4px",
            "--cs-color-border-default": "#45210E",
            "--cs-component-textfield-border-default": "#45210E",
            "--cs-shadow-xs": "2px 2px 0 #45210E",
            "--cs-shadow-sm": "3px 3px 0 #45210E",
            "--cs-shadow-md": "4px 4px 0 #45210E",
            "--cs-shadow-lg": "6px 6px 0 #45210E",
            "--cs-shadow-xl": "8px 8px 0 #45210E",
            "--cs-glass-whisper-blur": "0px",
            "--cs-glass-light-blur": "0px",
            "--cs-glass-standard-blur": "0px",
            "--cs-glass-heavy-blur": "0px",
            "--cs-glass-whisper-opacity": "100%",
            "--cs-glass-light-opacity": "100%",
            "--cs-glass-standard-opacity": "100%",
            "--cs-glass-heavy-opacity": "100%",
            "--cs-duration-fast": "100ms",
            "--cs-duration-base": "140ms"
          }
        },
        "densities": {
          "compact": {
            "--cs-component-button-md-minHeight": "36px",
            "--cs-component-button-md-paddingY": "8px",
            "--cs-component-button-md-paddingX": "16px",
            "--cs-component-button-sm-minHeight": "30px",
            "--cs-component-button-sm-paddingY": "5px",
            "--cs-component-button-sm-paddingX": "10px",
            "--cs-component-button-lg-minHeight": "44px",
            "--cs-component-button-lg-paddingY": "12px",
            "--cs-component-button-lg-paddingX": "22px",
            "--cs-component-button-gap": "6px",
            "--cs-component-textfield-minHeight": "38px",
            "--cs-component-textfield-paddingY": "7px",
            "--cs-component-textfield-paddingX": "10px"
          }
        },
        "elementsDark": {
          "tho": {
            "--cs-accent-bright": "#FEC42C",
            "--cs-accent-strong": "#795507",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#2F2203",
            "--cs-accent-ink": "#FEC849"
          },
          "tho-clay": {
            "--cs-accent": "#F3A372",
            "--cs-accent-bright": "#F4C5A3",
            "--cs-accent-strong": "#864927",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#371C0B",
            "--cs-accent-ink": "#F7C8A6"
          },
          "tho-sand": {
            "--cs-accent-strong": "#725615",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#2F2203",
            "--cs-accent-ink": "#EFDCB2"
          },
          "hoa": {
            "--cs-accent": "#FB9E7A",
            "--cs-accent-bright": "#FEC099",
            "--cs-accent-strong": "#9F3405",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#381B10",
            "--cs-accent-ink": "#FEC5A1"
          },
          "hoa-lava": {
            "--cs-accent": "#FE9982",
            "--cs-accent-bright": "#FFBF9E",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#391A13",
            "--cs-accent-ink": "#FFC4A5"
          },
          "hoa-plasma": {
            "--cs-accent": "#FD97A3",
            "--cs-accent-bright": "#FDBECA",
            "--cs-accent-strong": "#A91A43",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#38191D",
            "--cs-accent-ink": "#FDC3CE"
          },
          "thuy": {
            "--cs-accent": "#7FC0CE",
            "--cs-accent-bright": "#ACD7E1",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#042930",
            "--cs-accent-ink": "#AFDAE4"
          },
          "thuy-ocean": {
            "--cs-accent": "#87B9DD",
            "--cs-accent-bright": "#B2D6EA",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#08273A",
            "--cs-accent-ink": "#B2D6EA"
          },
          "thuy-mist": {
            "--cs-accent-strong": "#3F5F65",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#0F282C",
            "--cs-accent-ink": "#C4DADD"
          },
          "moc": {
            "--cs-accent": "#9BBE78",
            "--cs-accent-bright": "#BFD88D",
            "--cs-accent-strong": "#44622D",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#1C290D",
            "--cs-accent-ink": "#C2DB90"
          },
          "moc-bamboo": {
            "--cs-accent-strong": "#4C6421",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#1F280A",
            "--cs-accent-ink": "#C7D99E"
          },
          "moc-forest": {
            "--cs-accent": "#9EBE8D",
            "--cs-accent-bright": "#BDD8A4",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#19290F",
            "--cs-accent-ink": "#C0DBA7"
          },
          "kim": {
            "--cs-accent-strong": "#675A4A",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#2D220F",
            "--cs-accent-ink": "#DBCFB9"
          },
          "kim-steel": {
            "--cs-accent": "#B2B6B6",
            "--cs-accent-bright": "#CCD0D0",
            "--cs-accent-strong": "#555B5D",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#222525",
            "--cs-accent-ink": "#CFD3D3"
          },
          "kim-titanium": {
            "--cs-accent": "#BFB3A5",
            "--cs-accent-on": "#f5ead9",
            "--cs-accent-tint": "#2B2217",
            "--cs-accent-ink": "#D9CFC0"
          }
        }
      }
    }
  },
  "color": {
    "$description": "Core semantic colours (brand, surface, text, semantic, border, link).",
    "--cs-color-brand-umber": {
      "$value": "#45210E",
      "$type": "color"
    },
    "--cs-color-brand-ochre": {
      "$value": "#F4BA17",
      "$type": "color"
    },
    "--cs-color-surface-page": {
      "$value": "#FFFDF8",
      "$type": "color"
    },
    "--cs-color-surface-panel": {
      "$value": "#FFFFFF",
      "$type": "color"
    },
    "--cs-color-surface-raised": {
      "$value": "#FBF4E9",
      "$type": "color"
    },
    "--cs-color-text-primary": {
      "$value": "#45210E",
      "$type": "color"
    },
    "--cs-color-text-inverse": {
      "$value": "#FFFFFF",
      "$type": "color"
    },
    "--cs-color-text-accent": {
      "$value": "#6E3B0E",
      "$type": "color"
    },
    "--cs-color-text-muted": {
      "$value": "#6E5A4C",
      "$type": "color"
    },
    "--cs-color-semantic-success": {
      "$value": "#166534",
      "$type": "color"
    },
    "--cs-color-semantic-danger": {
      "$value": "#B42318",
      "$type": "color"
    },
    "--cs-color-semantic-warning": {
      "$value": "#92400E",
      "$type": "color"
    },
    "--cs-color-semantic-info": {
      "$value": "#1D4ED8",
      "$type": "color"
    },
    "--cs-color-accent-ochre": {
      "$value": "#F4BA17",
      "$type": "color"
    },
    "--cs-color-border-default": {
      "$value": "#E7D9C6",
      "$type": "color"
    },
    "--cs-color-link": {
      "$value": "#6E3B0E",
      "$type": "color"
    },
    "--cs-color-link-hover": {
      "$value": "#45210E",
      "$type": "color"
    }
  },
  "component": {
    "$description": "Component-level design decisions (button, textfield sizing & colour).",
    "--cs-component-button-primary-bg": {
      "$value": "#45210E",
      "$type": "color"
    },
    "--cs-component-button-primary-fg": {
      "$value": "#FFFFFF",
      "$type": "color"
    },
    "--cs-component-button-gap": {
      "$value": "8px",
      "$type": "dimension"
    },
    "--cs-component-button-radius": {
      "$value": "8px",
      "$type": "dimension"
    },
    "--cs-component-button-sm-paddingY": {
      "$value": "8px",
      "$type": "dimension"
    },
    "--cs-component-button-sm-paddingX": {
      "$value": "14px",
      "$type": "dimension"
    },
    "--cs-component-button-sm-minHeight": {
      "$value": "36px",
      "$type": "dimension"
    },
    "--cs-component-button-md-paddingY": {
      "$value": "12px",
      "$type": "dimension"
    },
    "--cs-component-button-md-paddingX": {
      "$value": "20px",
      "$type": "dimension"
    },
    "--cs-component-button-md-minHeight": {
      "$value": "44px",
      "$type": "dimension"
    },
    "--cs-component-button-lg-paddingY": {
      "$value": "16px",
      "$type": "dimension"
    },
    "--cs-component-button-lg-paddingX": {
      "$value": "28px",
      "$type": "dimension"
    },
    "--cs-component-button-lg-minHeight": {
      "$value": "52px",
      "$type": "dimension"
    },
    "--cs-component-textfield-border-default": {
      "$value": "#BFA58F",
      "$type": "color"
    },
    "--cs-component-textfield-paddingY": {
      "$value": "10px",
      "$type": "dimension"
    },
    "--cs-component-textfield-paddingX": {
      "$value": "12px",
      "$type": "dimension"
    },
    "--cs-component-textfield-minHeight": {
      "$value": "44px",
      "$type": "dimension"
    }
  },
  "accent": {
    "$description": "Ngũ Hành elemental accent role tokens — reskinned per element×variant scope.",
    "--cs-accent": {
      "$value": "#F4BA17",
      "$type": "color"
    },
    "--cs-accent-strong": {
      "$value": "#B98200",
      "$type": "color"
    },
    "--cs-accent-bright": {
      "$value": "#F4BA17",
      "$type": "color"
    },
    "--cs-accent-on": {
      "$value": "#45210E",
      "$type": "color"
    },
    "--cs-accent-tint": {
      "$value": "#FBF4E9",
      "$type": "color"
    },
    "--cs-accent-ink": {
      "$value": "#45210E",
      "$type": "color"
    },
    "--cs-accent-glow": {
      "$value": "rgba(244, 186, 23, 0.5)",
      "$type": "color"
    },
    "--cs-accent-grad-a": {
      "$value": "#F4BA17",
      "$type": "color"
    },
    "--cs-accent-grad-b": {
      "$value": "#C77B4A",
      "$type": "color"
    }
  },
  "depth": {
    "$description": "Elevation/stacking depth scale.",
    "--cs-depth-bg": {
      "$value": "0",
      "$type": "number"
    },
    "--cs-depth-section": {
      "$value": "5",
      "$type": "number"
    },
    "--cs-depth-card": {
      "$value": "10",
      "$type": "number"
    },
    "--cs-depth-nav": {
      "$value": "50",
      "$type": "number"
    },
    "--cs-depth-modal": {
      "$value": "100",
      "$type": "number"
    },
    "--cs-depth-toast": {
      "$value": "200",
      "$type": "number"
    }
  },
  "glass": {
    "--cs-glass-whisper-blur": {
      "$value": "8px",
      "$type": "dimension"
    },
    "--cs-glass-whisper-saturate": {
      "$value": "110%"
    },
    "--cs-glass-whisper-opacity": {
      "$value": "60%"
    },
    "--cs-glass-light-blur": {
      "$value": "12px",
      "$type": "dimension"
    },
    "--cs-glass-light-saturate": {
      "$value": "130%"
    },
    "--cs-glass-light-opacity": {
      "$value": "70%"
    },
    "--cs-glass-standard-blur": {
      "$value": "16px",
      "$type": "dimension"
    },
    "--cs-glass-standard-saturate": {
      "$value": "150%"
    },
    "--cs-glass-standard-opacity": {
      "$value": "80%"
    },
    "--cs-glass-heavy-blur": {
      "$value": "24px",
      "$type": "dimension"
    },
    "--cs-glass-heavy-saturate": {
      "$value": "180%"
    },
    "--cs-glass-heavy-opacity": {
      "$value": "90%"
    }
  },
  "shadow": {
    "$description": "Elevation shadows (light + dark overrides).",
    "--cs-shadow-xs": {
      "$value": "0 1px 2px rgba(69, 33, 14, 0.06)"
    },
    "--cs-shadow-sm": {
      "$value": "0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06)"
    },
    "--cs-shadow-md": {
      "$value": "0 12px 30px rgba(31, 19, 11, 0.18)"
    },
    "--cs-shadow-lg": {
      "$value": "0 20px 60px rgba(69, 33, 14, 0.18)"
    },
    "--cs-shadow-xl": {
      "$value": "0 24px 80px rgba(31, 19, 11, 0.26)"
    }
  },
  "duration": {
    "--cs-duration-instant": {
      "$value": "0ms",
      "$type": "duration"
    },
    "--cs-duration-fast": {
      "$value": "0ms",
      "$type": "duration"
    },
    "--cs-duration-base": {
      "$value": "0ms",
      "$type": "duration"
    },
    "--cs-duration-slow": {
      "$value": "0ms",
      "$type": "duration"
    }
  },
  "ease": {
    "--cs-ease-standard": {
      "$value": [
        0.2,
        0,
        0,
        1
      ],
      "$type": "cubicBezier"
    },
    "--cs-ease-entrance": {
      "$value": [
        0,
        0,
        0,
        1
      ],
      "$type": "cubicBezier"
    },
    "--cs-ease-exit": {
      "$value": [
        0.4,
        0,
        1,
        1
      ],
      "$type": "cubicBezier"
    },
    "--cs-ease-emphasized": {
      "$value": [
        0.2,
        0,
        0,
        1
      ],
      "$type": "cubicBezier"
    }
  },
  "space": {
    "$description": "Spacing scale.",
    "--cs-space-0": {
      "$value": "0px",
      "$type": "dimension"
    },
    "--cs-space-1": {
      "$value": "4px",
      "$type": "dimension"
    },
    "--cs-space-2": {
      "$value": "8px",
      "$type": "dimension"
    },
    "--cs-space-3": {
      "$value": "12px",
      "$type": "dimension"
    },
    "--cs-space-4": {
      "$value": "16px",
      "$type": "dimension"
    },
    "--cs-space-5": {
      "$value": "20px",
      "$type": "dimension"
    },
    "--cs-space-6": {
      "$value": "24px",
      "$type": "dimension"
    },
    "--cs-space-8": {
      "$value": "32px",
      "$type": "dimension"
    },
    "--cs-space-10": {
      "$value": "40px",
      "$type": "dimension"
    },
    "--cs-space-12": {
      "$value": "48px",
      "$type": "dimension"
    },
    "--cs-space-16": {
      "$value": "64px",
      "$type": "dimension"
    },
    "--cs-space-20": {
      "$value": "80px",
      "$type": "dimension"
    },
    "--cs-space-24": {
      "$value": "96px",
      "$type": "dimension"
    }
  },
  "radius": {
    "$description": "Corner radius scale.",
    "--cs-radius-sm": {
      "$value": "4px",
      "$type": "dimension"
    },
    "--cs-radius-md": {
      "$value": "8px",
      "$type": "dimension"
    },
    "--cs-radius-lg": {
      "$value": "14px",
      "$type": "dimension"
    },
    "--cs-radius-full": {
      "$value": "999px",
      "$type": "dimension"
    }
  },
  "breakpoint": {
    "$description": "Responsive breakpoints.",
    "--cs-breakpoint-xs": {
      "$value": "0px",
      "$type": "dimension"
    },
    "--cs-breakpoint-sm": {
      "$value": "640px",
      "$type": "dimension"
    },
    "--cs-breakpoint-md": {
      "$value": "768px",
      "$type": "dimension"
    },
    "--cs-breakpoint-lg": {
      "$value": "1024px",
      "$type": "dimension"
    },
    "--cs-breakpoint-xl": {
      "$value": "1280px",
      "$type": "dimension"
    },
    "--cs-breakpoint-2xl": {
      "$value": "1536px",
      "$type": "dimension"
    }
  },
  "container": {
    "--cs-container-max": {
      "$value": "1320px",
      "$type": "dimension"
    }
  },
  "font": {
    "$description": "Typography — families, sizes, weights, line-heights, tracking.",
    "--cs-font-family-ui": {
      "$value": [
        "Be Vietnam Pro",
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ],
      "$type": "fontFamily"
    },
    "--cs-font-family-mono": {
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Consolas",
        "monospace"
      ],
      "$type": "fontFamily"
    },
    "--cs-font-weight-regular": {
      "$value": "400",
      "$type": "number"
    },
    "--cs-font-weight-medium": {
      "$value": "500",
      "$type": "number"
    },
    "--cs-font-weight-semibold": {
      "$value": "600",
      "$type": "number"
    },
    "--cs-font-weight-bold": {
      "$value": "700",
      "$type": "number"
    },
    "--cs-font-weight-extrabold": {
      "$value": "800",
      "$type": "number"
    },
    "--cs-font-lineHeight-body": {
      "$value": "1.5",
      "$type": "number"
    },
    "--cs-font-lineHeight-heading": {
      "$value": "1.35",
      "$type": "number"
    },
    "--cs-font-lineHeight-tight": {
      "$value": "1.15",
      "$type": "number"
    },
    "--cs-font-size-xs": {
      "$value": "0.75rem",
      "$type": "dimension"
    },
    "--cs-font-size-sm": {
      "$value": "0.875rem",
      "$type": "dimension"
    },
    "--cs-font-size-base": {
      "$value": "1rem",
      "$type": "dimension"
    },
    "--cs-font-size-md": {
      "$value": "1.125rem",
      "$type": "dimension"
    },
    "--cs-font-size-lg": {
      "$value": "1.25rem",
      "$type": "dimension"
    },
    "--cs-font-size-xl": {
      "$value": "1.5rem",
      "$type": "dimension"
    },
    "--cs-font-size-2xl": {
      "$value": "1.875rem",
      "$type": "dimension"
    },
    "--cs-font-size-3xl": {
      "$value": "2.25rem",
      "$type": "dimension"
    },
    "--cs-font-size-4xl": {
      "$value": "3rem",
      "$type": "dimension"
    },
    "--cs-font-size-5xl": {
      "$value": "3.75rem",
      "$type": "dimension"
    }
  },
  "text": {
    "--cs-text-display": {
      "$value": "var(--cs-font-size-5xl)"
    },
    "--cs-text-h1": {
      "$value": "var(--cs-font-size-3xl)"
    },
    "--cs-text-h2": {
      "$value": "var(--cs-font-size-2xl)"
    },
    "--cs-text-h3": {
      "$value": "var(--cs-font-size-xl)"
    },
    "--cs-text-h4": {
      "$value": "var(--cs-font-size-lg)"
    },
    "--cs-text-body-lg": {
      "$value": "var(--cs-font-size-md)"
    },
    "--cs-text-body": {
      "$value": "var(--cs-font-size-base)"
    },
    "--cs-text-secondary": {
      "$value": "var(--cs-font-size-sm)"
    },
    "--cs-text-caption": {
      "$value": "var(--cs-font-size-xs)"
    },
    "--cs-text-eyebrow": {
      "$value": "var(--cs-font-size-xs)"
    }
  },
  "letter": {
    "--cs-letter-spacing-tight": {
      "$value": "-0.01em",
      "$type": "dimension"
    },
    "--cs-letter-spacing-normal": {
      "$value": "0",
      "$type": "number"
    },
    "--cs-letter-spacing-caps": {
      "$value": "0.08em",
      "$type": "dimension"
    }
  },
  "icon": {
    "--cs-icon-sm": {
      "$value": "16px",
      "$type": "dimension"
    },
    "--cs-icon-md": {
      "$value": "20px",
      "$type": "dimension"
    },
    "--cs-icon-lg": {
      "$value": "24px",
      "$type": "dimension"
    }
  }
}