{
  "$meta": {
    "name": "Banking Experience System",
    "version": "2.0.0-draft",
    "prefix": "bes",
    "description": "Source of truth for BES design tokens. tokens.css is generated from this file - edit here, regenerate there.",
    "dimensions": [
      "scheme(light|dark)",
      "density(comfortable|standard|compact)",
      "direction(handled via logical properties)",
      "contrast(standard|high: planned)",
      "terminology(content layer)"
    ]
  },
  "primitive": {
    "gray": {
      "0": "#FFFFFF",
      "50": "#F7F8FA",
      "100": "#EEF0F4",
      "200": "#DDE1E8",
      "300": "#C2C9D4",
      "400": "#9AA4B4",
      "500": "#717E92",
      "600": "#55617A",
      "700": "#3D4763",
      "800": "#2A324B",
      "900": "#161C2E"
    },
    "blue": {
      "50": "#EFF4FF",
      "100": "#DCE7FE",
      "200": "#B9CFFD",
      "300": "#8AAEF9",
      "400": "#5A8AF2",
      "350": "#6B96F4",
      "500": "#3168E8",
      "600": "#1F52C4",
      "700": "#17408F",
      "800": "#12305F",
      "900": "#0C2140"
    },
    "green": {
      "50": "#EDFAF3",
      "100": "#D3F2E0",
      "200": "#A5E4C2",
      "300": "#6CCD9C",
      "400": "#35B274",
      "500": "#149355",
      "600": "#0B7A45",
      "700": "#085F37",
      "800": "#06492B",
      "900": "#04331E"
    },
    "red": {
      "50": "#FDF0EE",
      "100": "#FADAD5",
      "200": "#F4B4AA",
      "300": "#EA8172",
      "400": "#DC5341",
      "500": "#C43A28",
      "600": "#A82E1F",
      "700": "#832317",
      "800": "#611A11",
      "900": "#43120C"
    },
    "amber": {
      "50": "#FDF6EC",
      "100": "#FAE8CC",
      "200": "#F3D093",
      "300": "#E8B054",
      "400": "#D18F1F",
      "500": "#B27612",
      "600": "#8F5F0E",
      "700": "#6F4A0B",
      "800": "#523708",
      "900": "#392605"
    },
    "teal": {
      "50": "#EBF7F8",
      "100": "#CFEDEF",
      "200": "#9FDADF",
      "300": "#63BFC8",
      "400": "#2FA1AD",
      "500": "#17838F",
      "600": "#0F6974",
      "700": "#0B525B",
      "800": "#083E45",
      "900": "#052B30"
    },
    "purple": {
      "50": "#F4F1FC",
      "100": "#E5DFF8",
      "200": "#CBBFF0",
      "300": "#AA95E3",
      "400": "#8A6ED3",
      "500": "#6F4FBF",
      "600": "#5A3DA0",
      "700": "#46307C",
      "800": "#34245C",
      "900": "#241940"
    },
    "gold": {
      "100": "#F6EBD4",
      "300": "#DDBE7F",
      "500": "#B8933F",
      "700": "#8A6B25"
    },
    "dark": {
      "surface1": "#10141F",
      "surface2": "#181D2B",
      "surface3": "#212739",
      "raised": "#262D42",
      "line": "#2A324B",
      "line2": "#3D4763",
      "text1": "#F2F4F8",
      "text2": "#A8B1C2",
      "text3": "#71809A",
      "posTint": "#0B2E1E",
      "negTint": "#361410",
      "warnTint": "#33270A",
      "infoTint": "#0A2A2E",
      "holdTint": "#1F1638"
    },
    "space": {
      "2": "2px",
      "4": "4px",
      "8": "8px",
      "12": "12px",
      "16": "16px",
      "20": "20px",
      "24": "24px",
      "32": "32px",
      "40": "40px",
      "48": "48px",
      "64": "64px",
      "80": "80px"
    },
    "radius": {
      "sm": "6px",
      "md": "10px",
      "lg": "16px",
      "full": "999px"
    },
    "size": {
      "targetMin": "44px",
      "targetKiosk": "56px"
    },
    "font": {
      "latin": "\"Inter\",-apple-system,\"Segoe UI\",Roboto,sans-serif",
      "arabic": "\"Noto Sans Arabic\",\"Segoe UI Arabic\",\"Geeza Pro\",sans-serif",
      "stack": "\"Inter\",\"Noto Sans Arabic\",-apple-system,\"Segoe UI\",sans-serif"
    },
    "motion": {
      "instant": "80ms",
      "fast": "140ms",
      "standard": "220ms",
      "gentle": "320ms",
      "deliberate": "480ms",
      "easeStandard": "cubic-bezier(0.2,0,0,1)",
      "easeEnter": "cubic-bezier(0,0,0,1)",
      "easeExit": "cubic-bezier(0.3,0,1,1)",
      "spin": "700ms",
      "pulse": "1400ms"
    },
    "z": {
      "base": "0",
      "raised": "10",
      "sticky": "100",
      "drawer": "800",
      "modal": "900",
      "toast": "950",
      "critical": "1000"
    }
  },
  "semantic": {
    "surface": {
      "primary": {
        "light": "{gray.0}",
        "dark": "{dark.surface1}"
      },
      "secondary": {
        "light": "{gray.50}",
        "dark": "{dark.surface2}"
      },
      "tertiary": {
        "light": "{gray.100}",
        "dark": "{dark.surface3}"
      },
      "raised": {
        "light": "{gray.0}",
        "dark": "{dark.raised}"
      },
      "inverse": {
        "light": "{gray.900}",
        "dark": "{dark.raised}"
      }
    },
    "text": {
      "primary": {
        "light": "{gray.900}",
        "dark": "{dark.text1}"
      },
      "secondary": {
        "light": "{gray.600}",
        "dark": "{dark.text2}"
      },
      "disabled": {
        "light": "{gray.400}",
        "dark": "{dark.text3}"
      },
      "inverse": {
        "light": "{gray.0}",
        "dark": "{gray.900}"
      },
      "link": {
        "light": "{blue.600}",
        "dark": "{blue.350}"
      },
      "onAction": {
        "light": "{gray.0}",
        "dark": "{blue.900}"
      }
    },
    "border": {
      "default": {
        "light": "{gray.200}",
        "dark": "{dark.line}"
      },
      "strong": {
        "light": "{gray.300}",
        "dark": "{dark.line2}"
      },
      "focus": {
        "light": "{blue.500}",
        "dark": "{blue.300}"
      },
      "error": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "input": {
        "light": "{gray.500}",
        "dark": "#8A94A8",
        "$note": "Functional control boundaries (inputs, PIN cells, upload zones) - held to WCAG 1.4.11 3:1. border.default/strong remain decorative separators."
      }
    },
    "action": {
      "primary": {
        "light": "{blue.600}",
        "dark": "{blue.350}"
      },
      "primaryHover": {
        "light": "{blue.700}",
        "dark": "{blue.300}"
      },
      "primaryPressed": {
        "light": "{blue.800}",
        "dark": "{blue.200}"
      },
      "destructive": {
        "light": "{red.600}",
        "dark": "{red.300}"
      }
    },
    "status": {
      "$note": "Generic UI status for non-transaction surfaces: form validation, alerts, banners. A transaction's state comes from transaction.*.",
      "success": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "successTint": {
        "light": "{green.50}",
        "dark": "{dark.posTint}"
      },
      "warning": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      },
      "warningTint": {
        "light": "{amber.50}",
        "dark": "{dark.warnTint}"
      },
      "error": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "errorTint": {
        "light": "{red.50}",
        "dark": "{dark.negTint}"
      },
      "info": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "infoTint": {
        "light": "{teal.50}",
        "dark": "{dark.infoTint}"
      },
      "neutral": {
        "light": "{gray.600}",
        "dark": "{dark.text2}"
      }
    },
    "financial": {
      "$note": "Value semantics — what an amount MEANS, not what stage it is at. Transaction lifecycle states live in transaction.* and nowhere else.",
      "income": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "expense": {
        "light": "{gray.900}",
        "dark": "{dark.text1}",
        "$note": "Expense is neutral by design - red is reserved for problems"
      },
      "negative": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "reserved": {
        "light": "{purple.600}",
        "dark": "{purple.300}"
      }
    },
    "risk": {
      "low": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "medium": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      },
      "high": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "critical": {
        "light": "{red.700}",
        "dark": "{red.200}"
      }
    },
    "chart": {
      "cat1": {
        "light": "{blue.600}",
        "dark": "{blue.300}"
      },
      "cat2": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "cat3": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      },
      "cat4": {
        "light": "{purple.600}",
        "dark": "{purple.300}"
      },
      "cat5": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "cat6": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "cat7": {
        "light": "{gray.600}",
        "dark": "{gray.400}"
      }
    },
    "elevation": {
      "e1": {
        "light": "0 1px 2px rgba(22,28,46,.08)",
        "dark": "none"
      },
      "e2": {
        "light": "0 2px 8px rgba(22,28,46,.10)",
        "dark": "none"
      },
      "e3": {
        "light": "0 8px 24px rgba(22,28,46,.14)",
        "dark": "none"
      },
      "overlay": {
        "light": "rgba(22,28,46,.48)",
        "dark": "rgba(0,0,0,.6)"
      }
    },
    "focus": {
      "width": {
        "light": "2px",
        "dark": "2px"
      },
      "offset": {
        "light": "2px",
        "dark": "2px"
      },
      "$note": "High-contrast dimension (planned) will raise width via override."
    },
    "transaction": {
      "$note": "The canonical transaction lifecycle (doc 07 §4). These 13 names are the stable API: the same string identifies a state in the UI, the token set, the event stream and the copy deck. tools/audit-states.py enforces that every one of them has a colour, a tint, a badge, an icon and both labels.",
      "draft": {
        "light": "{gray.600}",
        "dark": "{dark.text2}"
      },
      "draftTint": {
        "light": "{gray.100}",
        "dark": "{dark.surface3}"
      },
      "review": {
        "light": "{gray.700}",
        "dark": "{dark.text1}"
      },
      "reviewTint": {
        "light": "{gray.100}",
        "dark": "{dark.surface3}"
      },
      "authentication": {
        "light": "{blue.600}",
        "dark": "{blue.350}"
      },
      "authenticationTint": {
        "light": "{blue.50}",
        "dark": "{dark.surface2}"
      },
      "processing": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "processingTint": {
        "light": "{teal.50}",
        "dark": "{dark.infoTint}"
      },
      "pending": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "pendingTint": {
        "light": "{teal.50}",
        "dark": "{dark.infoTint}"
      },
      "completed": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "completedTint": {
        "light": "{green.50}",
        "dark": "{dark.posTint}"
      },
      "failed": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "failedTint": {
        "light": "{red.50}",
        "dark": "{dark.negTint}"
      },
      "unknown": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "unknownTint": {
        "light": "{teal.50}",
        "dark": "{dark.infoTint}"
      },
      "blocked": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      },
      "blockedTint": {
        "light": "{amber.50}",
        "dark": "{dark.warnTint}"
      },
      "reversed": {
        "light": "{purple.600}",
        "dark": "{purple.300}"
      },
      "reversedTint": {
        "light": "{purple.50}",
        "dark": "{dark.holdTint}"
      },
      "refunded": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "refundedTint": {
        "light": "{green.50}",
        "dark": "{dark.posTint}"
      },
      "disputed": {
        "light": "{purple.600}",
        "dark": "{purple.300}"
      },
      "disputedTint": {
        "light": "{purple.50}",
        "dark": "{dark.holdTint}"
      },
      "cancelled": {
        "light": "{gray.600}",
        "dark": "{dark.text2}"
      },
      "cancelledTint": {
        "light": "{gray.100}",
        "dark": "{dark.surface3}"
      }
    },
    "verification": {
      "unverified": {
        "light": "{gray.600}",
        "dark": "{dark.text2}"
      },
      "pending": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "verified": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "failed": {
        "light": "{red.600}",
        "dark": "{red.300}"
      },
      "expired": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      }
    },
    "consent": {
      "required": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      },
      "pending": {
        "light": "{teal.600}",
        "dark": "{teal.300}"
      },
      "granted": {
        "light": "{green.600}",
        "dark": "{green.300}"
      },
      "expired": {
        "light": "{amber.600}",
        "dark": "{amber.300}"
      },
      "revoked": {
        "light": "{gray.600}",
        "dark": "{dark.text2}"
      }
    }
  },
  "density": {
    "rowHeight": {
      "comfortable": "64px",
      "standard": "56px",
      "compact": "44px"
    },
    "cellPad": {
      "comfortable": "20px",
      "standard": "16px",
      "compact": "12px"
    },
    "cardPad": {
      "comfortable": "24px",
      "standard": "20px",
      "compact": "16px"
    },
    "fieldGap": {
      "comfortable": "28px",
      "standard": "24px",
      "compact": "20px"
    },
    "controlH": {
      "comfortable": "52px",
      "standard": "48px",
      "compact": "40px"
    },
    "ctlPadY": {
      "comfortable": "14px",
      "standard": "12px",
      "compact": "8px"
    },
    "ctlPadX": {
      "comfortable": "24px",
      "standard": "20px",
      "compact": "14px"
    },
    "listPadX": {
      "comfortable": "20px",
      "standard": "18px",
      "compact": "14px"
    }
  },
  "type": {
    "$note": "Sizes in px at default scale; Arabic optical adjustments applied via [lang=ar] overrides in generated CSS.",
    "display": {
      "size": "40px",
      "line": "48px",
      "weight": "700",
      "arSize": "41px",
      "arLine": "50px"
    },
    "h1": {
      "size": "32px",
      "line": "40px",
      "weight": "700",
      "arSize": "33px",
      "arLine": "42px"
    },
    "h2": {
      "size": "24px",
      "line": "32px",
      "weight": "600",
      "arSize": "25px",
      "arLine": "34px"
    },
    "h3": {
      "size": "20px",
      "line": "28px",
      "weight": "600",
      "arSize": "21px",
      "arLine": "30px"
    },
    "bodyLg": {
      "size": "18px",
      "line": "28px",
      "weight": "400",
      "arSize": "19px",
      "arLine": "30px"
    },
    "body": {
      "size": "16px",
      "line": "24px",
      "weight": "400",
      "arSize": "17px",
      "arLine": "26px"
    },
    "bodyMd": {
      "size": "15px",
      "line": "22px",
      "weight": "400",
      "arSize": "16px",
      "arLine": "24px"
    },
    "bodySm": {
      "size": "14px",
      "line": "20px",
      "weight": "400",
      "arSize": "15px",
      "arLine": "22px"
    },
    "bodyXs": {
      "size": "13px",
      "line": "18px",
      "weight": "400",
      "arSize": "14px",
      "arLine": "20px"
    },
    "label": {
      "size": "14px",
      "line": "20px",
      "weight": "500",
      "arSize": "15px",
      "arLine": "22px"
    },
    "caption": {
      "size": "12px",
      "line": "16px",
      "weight": "400",
      "arSize": "13px",
      "arLine": "18px"
    },
    "micro": {
      "size": "11px",
      "line": "14px",
      "weight": "500",
      "arSize": "12px",
      "arLine": "16px"
    },
    "amountHero": {
      "size": "40px",
      "line": "48px",
      "weight": "700"
    },
    "amountLg": {
      "size": "28px",
      "line": "36px",
      "weight": "700"
    },
    "amountMd": {
      "size": "20px",
      "line": "28px",
      "weight": "600"
    },
    "amountSm": {
      "size": "16px",
      "line": "24px",
      "weight": "600"
    },
    "amountMeta": {
      "size": "13px",
      "line": "16px",
      "weight": "500"
    }
  },
  "component": {
    "$note": "Component tier (doc 06 §3). Values scoped to one component that a brand may override without moving the shared scales. Everything else reads type.*, space.*, radius.* and the semantic tier directly.",
    "app": {
      "fontFamily": "{font.stack}",
      "fontFamilyArabic": "{font.arabic}"
    },
    "button": {
      "radius": "{radius.md}",
      "weight": "600",
      "fontSize": "{type.bodyMd.size}",
      "smFontSize": "{type.bodyXs.size}",
      "lgFontSize": "{type.body.size}"
    },
    "control": {
      "radius": "{radius.sm}",
      "fontSize": "{type.body.size}"
    },
    "card": {
      "radius": "{radius.lg}"
    },
    "modal": {
      "radius": "{radius.lg}"
    },
    "badge": {
      "radius": "{radius.full}"
    },
    "chip": {
      "radius": "{radius.full}"
    },
    "seg": {
      "radius": "8px"
    },
    "dot": {
      "radius": "50%"
    },
    "chart": {
      "swatchRadius": "3px"
    },
    "risk": {
      "barRadius": "4px"
    },
    "cardArt": {
      "inlineSize": "320px",
      "radius": "14px",
      "pad": "18px",
      "from": "{gray.800}",
      "to": "{gray.900}",
      "ink": "{gray.0}",
      "badgeBg": "rgba(255,255,255,.18)",
      "badgeRadius": "4px",
      "track": ".12em",
      "trackWide": ".06em",
      "frozenBg": "rgba(180,200,230,.25)"
    },
    "spinner": {
      "duration": "{motion.spin}"
    },
    "skeleton": {
      "duration": "{motion.pulse}"
    }
  }
}