{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "meta": {
    "name": "Wild Way — Khon Kaen Zoo Kiosk",
    "version": "1.0.0",
    "source": "index.html",
    "platform": "Vertical touch kiosk",
    "baseGrid": "4px"
  },
  "color": {
    "primitive": {
      "white": { "$type": "color", "$value": "#ffffff" },
      "black": { "$type": "color", "$value": "#000000" },
      "green": {
        "25": { "$type": "color", "$value": "#f8faf7" },
        "50": { "$type": "color", "$value": "#f5faf3" },
        "75": { "$type": "color", "$value": "#f6f8f4" },
        "100": { "$type": "color", "$value": "#edf7e9" },
        "150": { "$type": "color", "$value": "#eaf3e7" },
        "200": { "$type": "color", "$value": "#dbe6df" },
        "250": { "$type": "color", "$value": "#cfe5d8" },
        "300": { "$type": "color", "$value": "#b9e28e" },
        "400": { "$type": "color", "$value": "#79be32" },
        "500": { "$type": "color", "$value": "#7bc344" },
        "600": { "$type": "color", "$value": "#2f8d22" },
        "700": { "$type": "color", "$value": "#25721c" },
        "800": { "$type": "color", "$value": "#15522d" },
        "900": { "$type": "color", "$value": "#0f4c27" }
      },
      "neutral": {
        "25": { "$type": "color", "$value": "#f7f9f6" },
        "50": { "$type": "color", "$value": "#f5f6f2" },
        "100": { "$type": "color", "$value": "#f0f3ee" },
        "150": { "$type": "color", "$value": "#e4e9df" },
        "200": { "$type": "color", "$value": "#dce4d9" },
        "300": { "$type": "color", "$value": "#cdddc9" },
        "400": { "$type": "color", "$value": "#9aa49c" },
        "500": { "$type": "color", "$value": "#748176" },
        "600": { "$type": "color", "$value": "#59685e" },
        "700": { "$type": "color", "$value": "#24352a" }
      },
      "orange": {
        "50": { "$type": "color", "$value": "#fff0e9" },
        "500": { "$type": "color", "$value": "#ee744f" },
        "600": { "$type": "color", "$value": "#e97b3f" },
        "700": { "$type": "color", "$value": "#b24d30" }
      },
      "purple": {
        "50": { "$type": "color", "$value": "#f3edf9" },
        "500": { "$type": "color", "$value": "#7653a6" },
        "700": { "$type": "color", "$value": "#705a83" }
      },
      "teal500": { "$type": "color", "$value": "#147b82" },
      "red500": { "$type": "color", "$value": "#e2533c" },
      "red600": { "$type": "color", "$value": "#d9573e" },
      "amber50": { "$type": "color", "$value": "#fff5dc" },
      "amber700": { "$type": "color", "$value": "#76634d" }
    },
    "semantic": {
      "canvas": { "$type": "color", "$value": "{color.primitive.green.250}" },
      "appSurface": { "$type": "color", "$value": "{color.primitive.neutral.50}" },
      "surface": { "$type": "color", "$value": "{color.primitive.white}" },
      "surfaceSubtle": { "$type": "color", "$value": "{color.primitive.green.75}" },
      "surfaceSuccess": { "$type": "color", "$value": "{color.primitive.green.100}" },
      "surfaceWarning": { "$type": "color", "$value": "{color.primitive.amber50}" },
      "surfaceAccessible": { "$type": "color", "$value": "{color.primitive.purple.50}" },
      "overlay": { "$type": "color", "$value": "#f8faf7fa" },
      "navigationOverlay": { "$type": "color", "$value": "#fffffff5" },
      "textPrimary": { "$type": "color", "$value": "{color.primitive.neutral.700}" },
      "textSecondary": { "$type": "color", "$value": "{color.primitive.neutral.500}" },
      "textTertiary": { "$type": "color", "$value": "{color.primitive.neutral.400}" },
      "textInverse": { "$type": "color", "$value": "{color.primitive.white}" },
      "textBrand": { "$type": "color", "$value": "{color.primitive.green.800}" },
      "textAction": { "$type": "color", "$value": "{color.primitive.green.700}" },
      "textWarning": { "$type": "color", "$value": "{color.primitive.amber700}" },
      "textDanger": { "$type": "color", "$value": "{color.primitive.orange.700}" },
      "textAccessible": { "$type": "color", "$value": "{color.primitive.purple.700}" },
      "brandPrimary": { "$type": "color", "$value": "{color.primitive.green.600}" },
      "brandStrong": { "$type": "color", "$value": "{color.primitive.green.800}" },
      "brandDark": { "$type": "color", "$value": "{color.primitive.green.700}" },
      "brandHighlight": { "$type": "color", "$value": "{color.primitive.green.400}" },
      "actionPrimary": { "$type": "color", "$value": "{color.primitive.green.600}" },
      "actionHover": { "$type": "color", "$value": "{color.primitive.green.700}" },
      "actionSelected": { "$type": "color", "$value": "{color.primitive.green.800}" },
      "actionDisabled": { "$type": "color", "$value": "#66816a" },
      "actionDisabledText": { "$type": "color", "$value": "#d5dfd2" },
      "borderSubtle": { "$type": "color", "$value": "{color.primitive.neutral.150}" },
      "borderControl": { "$type": "color", "$value": "{color.primitive.neutral.200}" },
      "borderAction": { "$type": "color", "$value": "#b9cdb6" },
      "borderSuccess": { "$type": "color", "$value": "#79b96d" },
      "borderWarning": { "$type": "color", "$value": "#f2c8b8" },
      "focusRing": { "$type": "color", "$value": "#2f8d221a" },
      "mapAnimal": { "$type": "color", "$value": "{color.primitive.green.600}" },
      "mapActivity": { "$type": "color", "$value": "{color.primitive.orange.600}" },
      "mapService": { "$type": "color", "$value": "{color.primitive.teal500}" },
      "mapAccessible": { "$type": "color", "$value": "{color.primitive.purple.500}" },
      "mapCurrentLocation": { "$type": "color", "$value": "{color.primitive.red500}" }
    },
    "legacy": {
      "$description": "Compatibility aliases for inherited dark-theme selectors; do not use in new components.",
      "night950": { "$type": "color", "$value": "#061b24" },
      "night900": { "$type": "color", "$value": "#08232d" },
      "night850": { "$type": "color", "$value": "#0b2a34" },
      "night800": { "$type": "color", "$value": "#10282b" },
      "panel700": { "$type": "color", "$value": "#103640" },
      "panel600": { "$type": "color", "$value": "#164650" },
      "mint400": { "$type": "color", "$value": "#61e6c8" },
      "sand100": { "$type": "color", "$value": "#f0ecdf" }
    }
  },
  "font": {
    "family": {
      "sans": { "$type": "fontFamily", "$value": ["IBM Plex Sans Thai", "Noto Sans Thai", "system-ui", "sans-serif"] },
      "display": { "$type": "fontFamily", "$value": ["Space Grotesk", "IBM Plex Sans Thai", "system-ui", "sans-serif"] },
      "icon": { "$type": "fontFamily", "$value": ["Material Symbols Rounded"] }
    },
    "weight": {
      "regular": { "$type": "fontWeight", "$value": 400 },
      "medium": { "$type": "fontWeight", "$value": 500 },
      "semibold": { "$type": "fontWeight", "$value": 600 },
      "bold": { "$type": "fontWeight", "$value": 700 }
    },
    "size": {
      "2xs": { "$type": "dimension", "$value": "8px" },
      "xs": { "$type": "dimension", "$value": "9px" },
      "sm": { "$type": "dimension", "$value": "10px" },
      "md": { "$type": "dimension", "$value": "11px" },
      "base": { "$type": "dimension", "$value": "12px" },
      "lg": { "$type": "dimension", "$value": "13px" },
      "xl": { "$type": "dimension", "$value": "15px" },
      "2xl": { "$type": "dimension", "$value": "18px" },
      "3xl": { "$type": "dimension", "$value": "20px" },
      "4xl": { "$type": "dimension", "$value": "23px" },
      "5xl": { "$type": "dimension", "$value": "24px" },
      "6xl": { "$type": "dimension", "$value": "25px" },
      "displaySm": { "$type": "dimension", "$value": "36px" },
      "displayMd": { "$type": "dimension", "$value": "52px" },
      "displayLg": { "$type": "dimension", "$value": "88px" }
    },
    "lineHeight": {
      "tight": { "$type": "number", "$value": 1 },
      "heading": { "$type": "number", "$value": 1.25 },
      "body": { "$type": "number", "$value": 1.5 },
      "relaxed": { "$type": "number", "$value": 1.65 },
      "reading": { "$type": "number", "$value": 1.75 },
      "loose": { "$type": "number", "$value": 1.8 }
    },
    "letterSpacing": {
      "tight": { "$type": "dimension", "$value": "-0.055em" },
      "display": { "$type": "dimension", "$value": "-0.07em" },
      "button": { "$type": "dimension", "$value": "0.03em" },
      "label": { "$type": "dimension", "$value": "0.07em" },
      "eyebrow": { "$type": "dimension", "$value": "0.12em" },
      "caps": { "$type": "dimension", "$value": "0.18em" }
    }
  },
  "space": {
    "0": { "$type": "dimension", "$value": "0px" },
    "0.5": { "$type": "dimension", "$value": "2px" },
    "1": { "$type": "dimension", "$value": "4px" },
    "1.25": { "$type": "dimension", "$value": "5px" },
    "1.5": { "$type": "dimension", "$value": "6px" },
    "1.75": { "$type": "dimension", "$value": "7px" },
    "2": { "$type": "dimension", "$value": "8px" },
    "2.25": { "$type": "dimension", "$value": "9px" },
    "2.5": { "$type": "dimension", "$value": "10px" },
    "2.75": { "$type": "dimension", "$value": "11px" },
    "3": { "$type": "dimension", "$value": "12px" },
    "3.25": { "$type": "dimension", "$value": "13px" },
    "3.5": { "$type": "dimension", "$value": "14px" },
    "3.75": { "$type": "dimension", "$value": "15px" },
    "4": { "$type": "dimension", "$value": "16px" },
    "4.5": { "$type": "dimension", "$value": "18px" },
    "5": { "$type": "dimension", "$value": "20px" },
    "5.5": { "$type": "dimension", "$value": "22px" },
    "6": { "$type": "dimension", "$value": "24px" },
    "7": { "$type": "dimension", "$value": "28px" },
    "8": { "$type": "dimension", "$value": "32px" },
    "9": { "$type": "dimension", "$value": "36px" },
    "10": { "$type": "dimension", "$value": "40px" },
    "11": { "$type": "dimension", "$value": "44px" },
    "12": { "$type": "dimension", "$value": "48px" },
    "14": { "$type": "dimension", "$value": "56px" },
    "16": { "$type": "dimension", "$value": "64px" },
    "18": { "$type": "dimension", "$value": "72px" },
    "21": { "$type": "dimension", "$value": "84px" },
    "22": { "$type": "dimension", "$value": "88px" }
  },
  "radius": {
    "xs": { "$type": "dimension", "$value": "7px" },
    "sm": { "$type": "dimension", "$value": "8px" },
    "control": { "$type": "dimension", "$value": "9px" },
    "md": { "$type": "dimension", "$value": "10px" },
    "field": { "$type": "dimension", "$value": "11px" },
    "button": { "$type": "dimension", "$value": "12px" },
    "cardSm": { "$type": "dimension", "$value": "13px" },
    "card": { "$type": "dimension", "$value": "14px" },
    "cardLg": { "$type": "dimension", "$value": "16px" },
    "panel": { "$type": "dimension", "$value": "18px" },
    "map": { "$type": "dimension", "$value": "19px" },
    "modal": { "$type": "dimension", "$value": "20px" },
    "screen": { "$type": "dimension", "$value": "25px" },
    "device": { "$type": "dimension", "$value": "34px" },
    "pill": { "$type": "dimension", "$value": "999px" },
    "circle": { "$type": "dimension", "$value": "50%" }
  },
  "borderWidth": {
    "thin": { "$type": "dimension", "$value": "1px" },
    "strong": { "$type": "dimension", "$value": "2px" },
    "pin": { "$type": "dimension", "$value": "3px" },
    "navigationFocus": { "$type": "dimension", "$value": "3px" },
    "navigationKeyline": { "$type": "dimension", "$value": "5px" }
  },
  "effect": {
    "shadow": {
      "device": { "$type": "shadow", "$value": [{ "color": "#2949313d", "offsetX": "0px", "offsetY": "32px", "blur": "80px", "spread": "0px" }, { "color": "#264a2e14", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "1px" }] },
      "card": { "$type": "shadow", "$value": { "color": "#2e4a3512", "offsetX": "0px", "offsetY": "7px", "blur": "20px", "spread": "0px" } },
      "cardSoft": { "$type": "shadow", "$value": { "color": "#2e4a350f", "offsetX": "0px", "offsetY": "7px", "blur": "20px", "spread": "0px" } },
      "action": { "$type": "shadow", "$value": { "color": "#2f8d2233", "offsetX": "0px", "offsetY": "9px", "blur": "22px", "spread": "0px" } },
      "success": { "$type": "shadow", "$value": { "color": "#2f8d223d", "offsetX": "0px", "offsetY": "14px", "blur": "30px", "spread": "0px" } },
      "map": { "$type": "shadow", "$value": { "color": "#1f482829", "offsetX": "0px", "offsetY": "12px", "blur": "30px", "spread": "0px" } },
      "mapPin": { "$type": "shadow", "$value": { "color": "#17482257", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px" } },
      "sheet": { "$type": "shadow", "$value": { "color": "#1a3d2138", "offsetX": "0px", "offsetY": "12px", "blur": "26px", "spread": "0px" } },
      "modal": { "$type": "shadow", "$value": { "color": "#214b2a1f", "offsetX": "0px", "offsetY": "16px", "blur": "38px", "spread": "0px" } },
      "navigationCenter": { "$type": "shadow", "$value": { "color": "#2f8d224d", "offsetX": "0px", "offsetY": "7px", "blur": "18px", "spread": "0px" } },
      "navigationCenterActive": { "$type": "shadow", "$value": [{ "color": "#b9e28e", "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "3px" }, { "color": "#15522d52", "offsetX": "0px", "offsetY": "8px", "blur": "20px", "spread": "0px" }] }
    },
    "backdropBlur": {
      "sm": { "$type": "dimension", "$value": "10px" },
      "md": { "$type": "dimension", "$value": "12px" },
      "lg": { "$type": "dimension", "$value": "14px" }
    }
  },
  "size": {
    "pageMaxWidth": { "$type": "dimension", "$value": "1260px" },
    "deviceWidth": { "$type": "dimension", "$value": "444px" },
    "devicePadding": { "$type": "dimension", "$value": "9px" },
    "deviceHeight": { "$type": "dimension", "$value": "754px" },
    "touchTargetMin": { "$type": "dimension", "$value": "44px" },
    "bottomNavHeight": { "$type": "dimension", "$value": "72px" },
    "bottomNavColumns": { "$type": "number", "$value": 5 },
    "controlSm": { "$type": "dimension", "$value": "34px" },
    "controlMd": { "$type": "dimension", "$value": "42px" },
    "controlLg": { "$type": "dimension", "$value": "48px" },
    "controlXl": { "$type": "dimension", "$value": "52px" },
    "iconSm": { "$type": "dimension", "$value": "18px" },
    "iconMd": { "$type": "dimension", "$value": "21px" },
    "iconLg": { "$type": "dimension", "$value": "27px" },
    "navCenter": { "$type": "dimension", "$value": "58px" },
    "mapPin": { "$type": "dimension", "$value": "36px" },
    "mapRouteHeight": { "$type": "dimension", "$value": "330px" },
    "mapFullHeight": { "$type": "dimension", "$value": "545px" },
    "qrInline": { "$type": "dimension", "$value": "146px" },
    "qrModal": { "$type": "dimension", "$value": "260px" }
  },
  "motion": {
    "durationFast": { "$type": "duration", "$value": "180ms" },
    "durationBase": { "$type": "duration", "$value": "200ms" },
    "durationSlow": { "$type": "duration", "$value": "220ms" },
    "easingStandard": { "$type": "cubicBezier", "$value": [0.25, 0.1, 0.25, 1] },
    "easingEmphasized": { "$type": "cubicBezier", "$value": [0.2, 0.8, 0.2, 1] },
    "fadeDistance": { "$type": "dimension", "$value": "5px" }
  },
  "zIndex": {
    "base": { "$type": "number", "$value": 0 },
    "pin": { "$type": "number", "$value": 2 },
    "pinActive": { "$type": "number", "$value": 4 },
    "sheet": { "$type": "number", "$value": 5 },
    "navigation": { "$type": "number", "$value": 20 },
    "modal": { "$type": "number", "$value": 30 },
    "modalCritical": { "$type": "number", "$value": 31 }
  },
  "breakpoint": {
    "mobile": { "$type": "dimension", "$value": "520px" },
    "tablet": { "$type": "dimension", "$value": "900px" }
  },
  "component": {
    "button": {
      "primary": {
        "height": { "$type": "dimension", "$value": "{size.controlXl}" },
        "radius": { "$type": "dimension", "$value": "{radius.card}" },
        "background": { "$type": "color", "$value": "{color.semantic.actionPrimary}" },
        "foreground": { "$type": "color", "$value": "{color.semantic.textInverse}" }
      },
      "secondary": {
        "height": { "$type": "dimension", "$value": "{size.controlLg}" },
        "radius": { "$type": "dimension", "$value": "{radius.cardSm}" }
      }
    },
    "card": {
      "background": { "$type": "color", "$value": "{color.semantic.surface}" },
      "radius": { "$type": "dimension", "$value": "{radius.cardLg}" },
      "padding": { "$type": "dimension", "$value": "{space.3.5}" }
    },
    "field": {
      "height": { "$type": "dimension", "$value": "{size.touchTargetMin}" },
      "radius": { "$type": "dimension", "$value": "{radius.field}" },
      "background": { "$type": "color", "$value": "{color.primitive.neutral.25}" },
      "border": { "$type": "color", "$value": "{color.semantic.borderControl}" }
    },
    "navigation": {
      "height": { "$type": "dimension", "$value": "{size.bottomNavHeight}" },
      "iconSize": { "$type": "dimension", "$value": "{size.iconMd}" },
      "labelSize": { "$type": "dimension", "$value": "{font.size.2xs}" },
      "centerSize": { "$type": "dimension", "$value": "{size.navCenter}" },
      "centerOffset": { "$type": "dimension", "$value": "-25px" },
      "centerIconSize": { "$type": "dimension", "$value": "{size.iconLg}" },
      "centerKeyline": { "$type": "dimension", "$value": "{borderWidth.navigationKeyline}" }
    },
    "mapHotspot": {
      "size": { "$type": "dimension", "$value": "{size.mapPin}" },
      "iconSize": { "$type": "dimension", "$value": "{size.iconSm}" },
      "border": { "$type": "dimension", "$value": "{borderWidth.pin}" },
      "sheetRadius": { "$type": "dimension", "$value": "15px" }
    },
    "modal": {
      "background": { "$type": "color", "$value": "{color.semantic.overlay}" },
      "zIndex": { "$type": "number", "$value": "{zIndex.modal}" },
      "criticalZIndex": { "$type": "number", "$value": "{zIndex.modalCritical}" }
    }
  }
}