{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "id": "LoginScreen",
      "name": "Screen/Login",
      "reusable": true,
      "width": 480,
      "height": 640,
      "fill": "$bg-page",
      "layout": "vertical",
      "justifyContent": "center",
      "alignItems": "center",
      "gap": 32,
      "padding": 40,
      "children": [
        {
          "type": "frame",
          "id": "LoginBrand",
          "layout": "vertical",
          "gap": 12,
          "alignItems": "center",
          "children": [
            {"type": "frame", "id": "LoginLogo", "width": 72, "height": 72, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [
              {"type": "text", "id": "LoginLogoText", "fill": "#FFFFFF", "content": "tPOS", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
            ]},
            {"type": "text", "id": "LoginTitle", "fill": "$text-primary", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"},
            {"type": "text", "id": "LoginSubtitle", "fill": "$text-tertiary", "content": "Nhập mã PIN 6 số", "fontFamily": "Roboto", "fontSize": 14}
          ]
        },
        {
          "type": "frame",
          "id": "PinDots",
          "gap": 16,
          "children": [
            {"type": "frame", "id": "PinDot1", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100},
            {"type": "frame", "id": "PinDot2", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100},
            {"type": "frame", "id": "PinDot3", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100},
            {"type": "frame", "id": "PinDot4", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100},
            {"type": "frame", "id": "PinDot5", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100},
            {"type": "frame", "id": "PinDot6", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100}
          ]
        },
        {
          "type": "frame",
          "id": "Numpad",
          "layout": "vertical",
          "gap": 12,
          "children": [
            {"type": "frame", "id": "NumpadRow1", "gap": 12, "children": [
              {"type": "frame", "id": "NumKey1", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey1T", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKey2", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey2T", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKey3", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey3T", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}
            ]},
            {"type": "frame", "id": "NumpadRow2", "gap": 12, "children": [
              {"type": "frame", "id": "NumKey4", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey4T", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKey5", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey5T", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKey6", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey6T", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}
            ]},
            {"type": "frame", "id": "NumpadRow3", "gap": 12, "children": [
              {"type": "frame", "id": "NumKey7", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey7T", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKey8", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey8T", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKey9", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey9T", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}
            ]},
            {"type": "frame", "id": "NumpadRow4", "gap": 12, "children": [
              {"type": "frame", "id": "NumKeyBack", "width": 72, "height": 72, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NumKeyBackI", "width": 24, "height": 24, "iconFontName": "delete", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
              {"type": "frame", "id": "NumKey0", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey0T", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]},
              {"type": "frame", "id": "NumKeyEnter", "width": 72, "height": 72, "fill": "$orange-primary", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NumKeyEnterI", "width": 24, "height": 24, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}
            ]}
          ]
        },
        {
          "type": "frame",
          "id": "LoginActions",
          "gap": 24,
          "children": [
            {"type": "frame", "id": "SwitchUserBtn", "gap": 8, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "SwitchUserIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
              {"type": "text", "id": "SwitchUserText", "fill": "$text-tertiary", "content": "Đổi người dùng", "fontFamily": "Roboto", "fontSize": 14}
            ]},
            {"type": "frame", "id": "KeyboardBtn", "gap": 8, "alignItems": "center", "children": [
              {"type": "icon_font", "id": "KeyboardIcon", "width": 18, "height": 18, "iconFontName": "keyboard", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
              {"type": "text", "id": "KeyboardText", "fill": "$text-tertiary", "content": "Bàn phím", "fontFamily": "Roboto", "fontSize": 14}
            ]}
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"},
    "text-tertiary": {"type": "color", "value": "#8B8B90"}
  }
}
