{
  "$description": "Wanikiki — dark-mode design tokens (DTCG). Extracted verbatim from tokens.css, styles.css and the audited design-system documentation. No invented values. Dimensions are expressed in rem against a 16px base (1rem = 16px); values render identically to the original px. Deliberately kept in px: the focus ring, all shadow offsets/blurs/spreads, card border widths, the radius.pill sentinel, and the shell dimensions (status bar, content top) — device chrome and focus indicators must not scale with the user's font size.",
  "primitive": {
    "$description": "Raw palette and raw scales. Never referenced directly by screens — always through a semantic alias.",
    "blue": {
      "100": { "$type": "color", "$value": "#B3E9FF" },
      "300": { "$type": "color", "$value": "#66D3FF", "$description": "Blue text on dark — contrast 8.4:1" },
      "400": { "$type": "color", "$value": "#33C5FF" },
      "500": { "$type": "color", "$value": "#00B6FF", "$description": "Brand primary — 6.2:1 on #0A1228" },
      "600": { "$type": "color", "$value": "#0098D4" },
      "700": { "$type": "color", "$value": "#0073A8" }
    },
    "navy": {
      "$description": "Dark surface ramp derived from the original navy #0F1A38.",
      "900": { "$type": "color", "$value": "#0A1228" },
      "800": { "$type": "color", "$value": "#131C3A" },
      "700": { "$type": "color", "$value": "#1B2548" },
      "600": { "$type": "color", "$value": "#243057" },
      "500": { "$type": "color", "$value": "#2C3A66" }
    },
    "ink": {
      "100": { "$type": "color", "$value": "#F4F6FB", "$description": "16:1 on base" },
      "300": { "$type": "color", "$value": "#B4BFD9", "$description": "9:1 on base" },
      "500": { "$type": "color", "$value": "#7A88AD", "$description": "4.8:1 on base — AA floor" },
      "700": { "$type": "color", "$value": "#4A5575" },
      "onBlue": { "$type": "color", "$value": "#051022", "$description": "14:1 on blue.500" },
      "onSuccess": { "$type": "color", "$value": "#04201A" }
    },
    "white": {
      "a06": { "$type": "color", "$value": "rgba(255,255,255,0.06)" },
      "a12": { "$type": "color", "$value": "rgba(255,255,255,0.12)" },
      "a20": { "$type": "color", "$value": "rgba(255,255,255,0.20)" }
    },
    "green": {
      "500": { "$type": "color", "$value": "#2EE6A9", "$description": "11:1 on dark" },
      "a12": { "$type": "color", "$value": "rgba(46,230,169,0.12)" },
      "a28": { "$type": "color", "$value": "rgba(46,230,169,0.28)" }
    },
    "amber": {
      "500": { "$type": "color", "$value": "#FFB547" },
      "a12": { "$type": "color", "$value": "rgba(255,181,71,0.12)" },
      "a30": { "$type": "color", "$value": "rgba(255,181,71,0.30)" }
    },
    "coral": {
      "500": { "$type": "color", "$value": "#FF6B47" },
      "a12": { "$type": "color", "$value": "rgba(255,107,71,0.12)" },
      "a32": { "$type": "color", "$value": "rgba(255,107,71,0.32)" }
    },
    "cyan": {
      "a06": { "$type": "color", "$value": "rgba(0,182,255,0.06)" },
      "a12": { "$type": "color", "$value": "rgba(102,211,255,0.12)" },
      "a55": { "$type": "color", "$value": "rgba(0,182,255,0.55)" }
    },
    "purple": { "500": { "$type": "color", "$value": "#A88AFF", "$description": "Accent — gradients and accent icons only. No tinted background variant exists." } },
    "yellow": { "500": { "$type": "color", "$value": "#FFD24A" } },
    "black": {
      "a32": { "$type": "color", "$value": "rgba(0,0,0,0.32)" },
      "a40": { "$type": "color", "$value": "rgba(0,0,0,0.40)" },
      "a55": { "$type": "color", "$value": "rgba(0,0,0,0.55)" }
    }
  },

  "color": {
    "$description": "Semantic aliases — the only colour layer screens consume.",
    "bg": {
      "base": { "$type": "color", "$value": "{primitive.navy.900}", "$description": "App root background" },
      "surface": { "$type": "color", "$value": "{primitive.navy.800}", "$description": "Primary card — the 'paper'" },
      "raised": { "$type": "color", "$value": "{primitive.navy.700}", "$description": "Raised card / input" },
      "overlay": { "$type": "color", "$value": "{primitive.navy.600}", "$description": "Bottom sheet / modal" },
      "pressed": { "$type": "color", "$value": "{primitive.navy.500}", "$description": "Active/pressed state" }
    },
    "text": {
      "primary": { "$type": "color", "$value": "{primitive.ink.100}" },
      "secondary": { "$type": "color", "$value": "{primitive.ink.300}" },
      "tertiary": { "$type": "color", "$value": "{primitive.ink.500}", "$description": "Placeholders, captions — AA floor, never below" },
      "disabled": { "$type": "color", "$value": "{primitive.ink.700}" },
      "onBlue": { "$type": "color", "$value": "{primitive.ink.onBlue}" },
      "onSuccess": { "$type": "color", "$value": "{primitive.ink.onSuccess}" },
      "brand": { "$type": "color", "$value": "{primitive.blue.300}", "$description": "Blue text on dark — use 300, never 500, for type" }
    },
    "border": {
      "subtle": { "$type": "color", "$value": "{primitive.white.a06}", "$description": "Card border, row dividers" },
      "default": { "$type": "color", "$value": "{primitive.white.a12}" },
      "strong": { "$type": "color", "$value": "{primitive.white.a20}" }
    },
    "brand": {
      "primary": { "$type": "color", "$value": "{primitive.blue.500}" },
      "hover": { "$type": "color", "$value": "{primitive.blue.400}", "$description": "Primary button hover only" },
      "deep": { "$type": "color", "$value": "{primitive.blue.700}" },
      "accent": { "$type": "color", "$value": "{primitive.purple.500}" },
      "accentAlt": { "$type": "color", "$value": "{primitive.yellow.500}" }
    },
    "status": {
      "success": { "$type": "color", "$value": "{primitive.green.500}" },
      "successBg": { "$type": "color", "$value": "{primitive.green.a12}" },
      "warning": { "$type": "color", "$value": "{primitive.amber.500}" },
      "warningBg": { "$type": "color", "$value": "{primitive.amber.a12}" },
      "error": { "$type": "color", "$value": "{primitive.coral.500}" },
      "errorBg": { "$type": "color", "$value": "{primitive.coral.a12}" },
      "info": { "$type": "color", "$value": "{primitive.blue.300}" },
      "infoBg": { "$type": "color", "$value": "{primitive.cyan.a12}" }
    }
  },

  "font": {
    "family": {
      "display": { "$type": "fontFamily", "$value": ["Raleway", "system-ui", "sans-serif"], "$description": "Headlines and hero numbers only" },
      "body": { "$type": "fontFamily", "$value": ["Poppins", "system-ui", "sans-serif"], "$description": "All UI, body, numbers, codes (mono was removed in the 2026 audit)" }
    },
    "weight": {
      "regular": { "$type": "fontWeight", "$value": 400 },
      "medium": { "$type": "fontWeight", "$value": 500 },
      "semibold": { "$type": "fontWeight", "$value": 600 },
      "bold": { "$type": "fontWeight", "$value": 700 },
      "extrabold": { "$type": "fontWeight", "$value": 800, "$description": "Raleway display only" }
    },
    "size": {
      "2xs": { "$type": "dimension", "$value": "0.6875rem" },
      "xs": { "$type": "dimension", "$value": "0.75rem" },
      "sm": { "$type": "dimension", "$value": "0.8125rem" },
      "md": { "$type": "dimension", "$value": "0.9375rem" },
      "base": { "$type": "dimension", "$value": "1rem" },
      "lg": { "$type": "dimension", "$value": "1.125rem" },
      "xl": { "$type": "dimension", "$value": "1.375rem" },
      "2xl": { "$type": "dimension", "$value": "1.75rem" },
      "3xl": { "$type": "dimension", "$value": "2.125rem", "$description": "Top of the scale — 4xl/44 and 5xl/56 were deleted in the 2026 audit (no usage)" }
    },
    "lineHeight": {
      "flat": { "$type": "number", "$value": 1, "$description": "Button label" },
      "display": { "$type": "number", "$value": 1.1, "$description": "Display specimen" },
      "heading": { "$type": "number", "$value": 1.25, "$description": "Panel title" },
      "snug": { "$type": "number", "$value": 1.3, "$description": "Toast / inline alert" },
      "body": { "$type": "number", "$value": 1.5 },
      "relaxed": { "$type": "number", "$value": 1.6, "$description": "Long-form paragraph blocks" }
    },
    "tracking": {
      "display": { "$type": "dimension", "$value": "-0.02em", "$description": "Raleway display sizes" },
      "button": { "$type": "dimension", "$value": "0.01em" }
    }
  },

  "typography": {
    "$description": "Documented type scale — the exact rows in the design-system specimen.",
    "display": {
      "3xl": { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontWeight": "{font.weight.extrabold}", "fontSize": "{font.size.3xl}", "lineHeight": "{font.lineHeight.display}", "letterSpacing": "{font.tracking.display}" }, "$description": "Hero amount · transfer detail" },
      "2xl": { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontWeight": "{font.weight.extrabold}", "fontSize": "{font.size.2xl}", "lineHeight": "{font.lineHeight.display}", "letterSpacing": "{font.tracking.display}" }, "$description": "Success screen · H1" },
      "xl": { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontWeight": "{font.weight.bold}", "fontSize": "{font.size.xl}", "lineHeight": "{font.lineHeight.display}", "letterSpacing": "{font.tracking.display}" }, "$description": "Top bar · H2" },
      "lg": { "$type": "typography", "$value": { "fontFamily": "{font.family.display}", "fontWeight": "{font.weight.bold}", "fontSize": "{font.size.lg}", "lineHeight": "{font.lineHeight.heading}", "letterSpacing": "{font.tracking.display}" }, "$description": "H3 · card titles" }
    },
    "number": {
      "hero": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.bold}", "fontSize": "{font.size.3xl}", "lineHeight": "{font.lineHeight.display}", "letterSpacing": "{font.tracking.display}" }, "$description": "Featured amount — tabular-nums" },
      "md": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.bold}", "fontSize": "{font.size.2xl}", "lineHeight": "{font.lineHeight.display}" }, "$description": "Total to pay" }
    },
    "body": {
      "lg": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.regular}", "fontSize": "{font.size.lg}", "lineHeight": "{font.lineHeight.body}" }, "$description": "Highlighted subtitle" },
      "base": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.regular}", "fontSize": "{font.size.base}", "lineHeight": "{font.lineHeight.body}" }, "$description": "Default body" },
      "md": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.medium}", "fontSize": "{font.size.md}", "lineHeight": "{font.lineHeight.body}" }, "$description": "List labels" },
      "sm": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.regular}", "fontSize": "{font.size.sm}", "lineHeight": "{font.lineHeight.body}" }, "$description": "Sub-labels, captions" },
      "xs": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.medium}", "fontSize": "{font.size.xs}", "lineHeight": "{font.lineHeight.snug}" }, "$description": "Microcopy" }
    },
    "label": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.semibold}", "fontSize": "{font.size.xs}", "lineHeight": "{font.lineHeight.snug}" }, "$description": "Section labels — uppercase" },
    "code": {
      "otp": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.semibold}", "fontSize": "{font.size.2xl}", "lineHeight": "{font.lineHeight.flat}" }, "$description": "OTP / SMS digits — tabular-nums" },
      "code": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.medium}", "fontSize": "0.875rem", "lineHeight": "{font.lineHeight.snug}" }, "$description": "Tracking code · public footer" },
      "sm": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.medium}", "fontSize": "{font.size.sm}", "lineHeight": "{font.lineHeight.snug}" }, "$description": "Countdowns · inline" },
      "xs": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.medium}", "fontSize": "{font.size.2xs}", "lineHeight": "{font.lineHeight.snug}" }, "$description": "Code under a name" },
      "2xs": { "$type": "typography", "$value": { "fontFamily": "{font.family.body}", "fontWeight": "{font.weight.medium}", "fontSize": "0.625rem", "lineHeight": "{font.lineHeight.snug}" }, "$description": "Code chip · conversation rows" }
    }
  },

  "space": {
    "$description": "4pt scale.",
    "1": { "$type": "dimension", "$value": "0.25rem" },
    "2": { "$type": "dimension", "$value": "0.5rem" },
    "3": { "$type": "dimension", "$value": "0.75rem" },
    "4": { "$type": "dimension", "$value": "1rem" },
    "5": { "$type": "dimension", "$value": "1.25rem" },
    "6": { "$type": "dimension", "$value": "1.5rem" },
    "8": { "$type": "dimension", "$value": "2rem" },
    "10": { "$type": "dimension", "$value": "2.5rem" },
    "12": { "$type": "dimension", "$value": "3rem" },
    "16": { "$type": "dimension", "$value": "4rem" }
  },

  "radius": {
    "xs": { "$type": "dimension", "$value": "0.375rem" },
    "sm": { "$type": "dimension", "$value": "0.625rem" },
    "md": { "$type": "dimension", "$value": "1rem" },
    "lg": { "$type": "dimension", "$value": "1.375rem" },
    "xl": { "$type": "dimension", "$value": "1.75rem" },
    "2xl": { "$type": "dimension", "$value": "2.25rem" },
    "pill": { "$type": "dimension", "$value": "999px" }
  },

  "shadow": {
    "sm": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "2px", "blur": "8px", "spread": "0px", "color": "{primitive.black.a32}" } },
    "md": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "8px", "blur": "24px", "spread": "0px", "color": "{primitive.black.a40}" } },
    "lg": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "20px", "blur": "48px", "spread": "0px", "color": "{primitive.black.a55}" } }
  },

  "glow": {
    "$description": "The three documented glows. Brand glow is rationed: Primary card only, max one per screen; success glow only on success buttons and the focal check.",
    "button": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "8px", "blur": "28px", "spread": "0px", "color": "rgba(0,182,255,0.35)" }, "$description": "Button glow — .wk-btn--primary and the floating action disc only" },
    "buttonSuccess": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "6px", "blur": "24px", "spread": "0px", "color": "rgba(46,230,169,0.30)" }, "$description": "Button glow, success variant" },
    "primaryCard": { "$type": "gradient", "$value": [ { "color": "rgba(0,182,255,0.22)", "position": 0 }, { "color": "rgba(0,182,255,0)", "position": 0.7 } ], "$description": "Brand glow — radial, 160px disc in the card corner. Primary card only, max 1 per screen. Never on Emphasis or Status cards." },
    "focalHalo": {
      "$description": "Focal halo of the unified SuccessCheck (07 Pago exitoso · 11 Detalle · 21 Seguimiento público). Halo diameter = icon size; disc inset = 25%.",
      "halo": { "$type": "gradient", "$value": [ { "color": "rgba(46,230,169,0.30)", "position": 0 }, { "color": "rgba(46,230,169,0)", "position": 0.7 } ] },
      "disc": { "$type": "shadow", "$value": [ { "offsetX": "0px", "offsetY": "12px", "blur": "30px", "spread": "0px", "color": "rgba(46,230,169,0.45)" }, { "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "6px", "color": "rgba(46,230,169,0.10)" } ] }
    }
  },

  "focus": {
    "ring": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "3px", "color": "{primitive.cyan.a55}" }, "$description": "WCAG 2.2 focus indicator — same ring on every interactive element, no exceptions" }
  },

  "size": {
    "avatar": {
      "sm": { "$type": "dimension", "$value": "2.25rem", "$description": "font-size 14px" },
      "md": { "$type": "dimension", "$value": "2.75rem", "$description": "Default — font-size inherited from .wk-avatar" },
      "lg": { "$type": "dimension", "$value": "4rem", "$description": "font-size 22px" }
    },
    "hitTarget": {
      "min": { "$type": "dimension", "$value": "2.75rem", "$description": "Absolute floor — .wk-btn--sm, icon buttons" },
      "default": { "$type": "dimension", "$value": "3.5rem", "$description": "Primary buttons, inputs, list rows" }
    },
    "shell": {
      "statusbar": { "$type": "dimension", "$value": "44px", "$description": "Status bar inset of .phone-content" },
      "contentTop": { "$type": "dimension", "$value": "54px", "$description": "Unified top offset applied by the shell. Screens must not set their own top padding/margin. Exception: onboarding (centred content)." }
    }
  },

  "component": {
    "$description": "Component-layer tokens — only where the system defines an explicit rule.",
    "card": {
      "$description": "Four roles, finite set. Glow is exclusive to Primary; the brand gradient is exclusive to Primary; semantic colour is exclusive to Status.",
      "surface": {
        "bg": { "$type": "color", "$value": "{color.bg.surface}" },
        "borderWidth": { "$type": "dimension", "$value": "1px" },
        "borderColor": { "$type": "color", "$value": "{color.border.subtle}" },
        "radius": { "$type": "dimension", "$value": "{radius.lg}" },
        "shadow": { "$type": "shadow", "$value": "{shadow.sm}" }
      },
      "primary": {
        "bg": { "$type": "gradient", "$value": [ { "color": "{color.bg.surface}", "position": 0 }, { "color": "{color.bg.raised}", "position": 1 } ], "$description": "135° brand gradient — Primary card only" },
        "glow": { "$type": "gradient", "$value": "{glow.primaryCard}", "$description": "Max one Primary card per screen" }
      },
      "emphasis": {
        "bg": { "$type": "color", "$value": "{primitive.cyan.a06}" },
        "borderWidth": { "$type": "dimension", "$value": "1.5px" },
        "borderColor": { "$type": "color", "$value": "{color.brand.primary}", "$description": "Pinned / selected card. No glow — brand glow is exclusive to Primary." }
      },
      "success": {
        "bg": { "$type": "color", "$value": "{color.status.successBg}" },
        "borderColor": { "$type": "color", "$value": "{primitive.green.a28}" }
      },
      "warning": {
        "bg": { "$type": "color", "$value": "{color.status.warningBg}" },
        "borderColor": { "$type": "color", "$value": "{primitive.amber.a30}" }
      },
      "error": {
        "bg": { "$type": "color", "$value": "{color.status.errorBg}" },
        "borderColor": { "$type": "color", "$value": "{primitive.coral.a32}", "$description": "Status cards carry no outer state shadow — the icon halo is separate." }
      }
    },
    "button": {
      "radius": { "$type": "dimension", "$value": "{radius.pill}" },
      "minHeight": { "$type": "dimension", "$value": "{size.hitTarget.default}" },
      "minHeightSm": { "$type": "dimension", "$value": "{size.hitTarget.min}" },
      "paddingBlock": { "$type": "dimension", "$value": "1.125rem" },
      "paddingInline": { "$type": "dimension", "$value": "1.625rem" },
      "glow": { "$type": "shadow", "$value": "{glow.button}", "$description": "Primary variant only" },
      "glowSuccess": { "$type": "shadow", "$value": "{glow.buttonSuccess}" }
    },
    "input": {
      "minHeight": { "$type": "dimension", "$value": "{size.hitTarget.default}" },
      "bg": { "$type": "color", "$value": "{color.bg.raised}" },
      "fontSize": { "$type": "dimension", "$value": "{font.size.base}" }
    },
    "row": {
      "minHeight": { "$type": "dimension", "$value": "{size.hitTarget.default}" },
      "gap": { "$type": "dimension", "$value": "0.875rem" },
      "divider": { "$type": "color", "$value": "{color.border.subtle}" }
    },
    "avatar": {
      "sm": { "$type": "dimension", "$value": "{size.avatar.sm}" },
      "md": { "$type": "dimension", "$value": "{size.avatar.md}" },
      "lg": { "$type": "dimension", "$value": "{size.avatar.lg}" },
      "radius": { "$type": "dimension", "$value": "{radius.pill}" },
      "innerStroke": { "$type": "shadow", "$value": { "inset": true, "offsetX": "0px", "offsetY": "0px", "blur": "0px", "spread": "1px", "color": "{primitive.white.a20}" } }
    }
  }
}