{
  "$description": "Brand: European Digital Identity — dark mode",
  "color": {
    "swatches": {
      "$description": "Source-of-truth color swatches from palette eudi@1.0.0",
      "branding": {
        "$value": "#004494",
        "$type": "color",
        "$description": "ECL canonical Branding blue — the European Commission identity colour."
      },
      "primary-180": {
        "$value": "#051036",
        "$type": "color",
        "$description": "Deepest primary — near-black blue for text and high-emphasis surfaces."
      },
      "primary-160": {
        "$value": "#0A1F6C",
        "$type": "color",
        "$description": "Deep primary — body text on light surfaces."
      },
      "primary-140": {
        "$value": "#0F2FA2",
        "$type": "color",
        "$description": "Strong primary — hover state for primary actions."
      },
      "primary-120": {
        "$value": "#143FD9",
        "$type": "color",
        "$description": "Mid-deep primary."
      },
      "primary-100": {
        "$value": "#3860ED",
        "$type": "color",
        "$description": "Default primary — the standard ECL interactive blue."
      },
      "primary-80": {
        "$value": "#5577F0",
        "$type": "color",
        "$description": "Lighter primary — quiet emphasis."
      },
      "primary-60": {
        "$value": "#89A1F4",
        "$type": "color",
        "$description": "Pale primary."
      },
      "primary-40": {
        "$value": "#B1C0F8",
        "$type": "color",
        "$description": "Very pale primary — surface tint."
      },
      "primary-20": {
        "$value": "#D8E0FB",
        "$type": "color",
        "$description": "Palest primary — quiet surface background."
      },
      "secondary-180": {
        "$value": "#8F5600",
        "$type": "color",
        "$description": "Deep secondary — strong warm accent."
      },
      "secondary-160": {
        "$value": "#E08700",
        "$type": "color",
        "$description": "Mid-deep secondary."
      },
      "secondary-140": {
        "$value": "#FF9D0A",
        "$type": "color",
        "$description": "Saturated secondary."
      },
      "secondary-120": {
        "$value": "#FFAD33",
        "$type": "color",
        "$description": "Mid secondary."
      },
      "secondary-100": {
        "$value": "#FFBE5C",
        "$type": "color",
        "$description": "Default secondary — the standard ECL warm accent."
      },
      "secondary-80": {
        "$value": "#FFCB7C",
        "$type": "color",
        "$description": "Lighter secondary."
      },
      "secondary-60": {
        "$value": "#FFD89D",
        "$type": "color",
        "$description": "Pale secondary."
      },
      "secondary-40": {
        "$value": "#FFE5BE",
        "$type": "color",
        "$description": "Very pale secondary."
      },
      "secondary-20": {
        "$value": "#FFF2DE",
        "$type": "color",
        "$description": "Palest secondary — quiet warm surface."
      },
      "dark-100": {
        "$value": "#26324B",
        "$type": "color",
        "$description": "Default ink — body text on light surfaces."
      },
      "dark-80": {
        "$value": "#546FA6",
        "$type": "color",
        "$description": "Secondary ink — hints, captions, metadata."
      },
      "dark-60": {
        "$value": "#99AACC",
        "$type": "color",
        "$description": "Tertiary ink — disabled text, quiet labels."
      },
      "neutral-180": {
        "$value": "#6C85D1",
        "$type": "color",
        "$description": "Strongest neutral."
      },
      "neutral-160": {
        "$value": "#7F95D7",
        "$type": "color",
        "$description": "Strong neutral."
      },
      "neutral-140": {
        "$value": "#92A5DD",
        "$type": "color",
        "$description": "Mid-strong neutral."
      },
      "neutral-120": {
        "$value": "#A6B5E3",
        "$type": "color",
        "$description": "Mid neutral."
      },
      "neutral-100": {
        "$value": "#B9C5E9",
        "$type": "color",
        "$description": "Default neutral — borders, dividers on elevated surfaces."
      },
      "neutral-80": {
        "$value": "#CDD5EF",
        "$type": "color",
        "$description": "Lighter neutral."
      },
      "neutral-60": {
        "$value": "#E0E5F5",
        "$type": "color",
        "$description": "Pale neutral."
      },
      "neutral-40": {
        "$value": "#F3F5FB",
        "$type": "color",
        "$description": "Very pale neutral — surface background."
      },
      "neutral-20": {
        "$value": "#F8F9FD",
        "$type": "color",
        "$description": "Palest neutral — page background tint."
      },
      "info": {
        "$value": "#3860ED",
        "$type": "color",
        "$description": "Info colour — identical to Primary 100."
      },
      "success": {
        "$value": "#24A148",
        "$type": "color",
        "$description": "Success / confirmation colour."
      },
      "warning": {
        "$value": "#F39811",
        "$type": "color",
        "$description": "Warning colour."
      },
      "error": {
        "$value": "#DA1E28",
        "$type": "color",
        "$description": "Error / destructive colour."
      },
      "background": {
        "$value": "#FCFCFC",
        "$type": "color",
        "$description": "Default page background — near-white."
      },
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "True white — used for elevated surfaces."
      }
    },
    "roles": {
      "$description": "Semantic color roles (dark mode) mapped to palette swatches",
      "background": {
        "$value": "{color.swatches.primary-180}",
        "$type": "color",
        "$description": "background role → Primary 180"
      },
      "surface": {
        "$value": "{color.swatches.primary-160}",
        "$type": "color",
        "$description": "surface role → Primary 160"
      },
      "surface-elevated": {
        "$value": "{color.swatches.primary-140}",
        "$type": "color",
        "$description": "surface-elevated role → Primary 140"
      },
      "text-primary": {
        "$value": "{color.swatches.neutral-60}",
        "$type": "color",
        "$description": "text-primary role → Neutral 60"
      },
      "text-secondary": {
        "$value": "{color.swatches.neutral-100}",
        "$type": "color",
        "$description": "text-secondary role → Neutral 100"
      },
      "text-tertiary": {
        "$value": "{color.swatches.neutral-140}",
        "$type": "color",
        "$description": "text-tertiary role → Neutral 140"
      },
      "primary": {
        "$value": "{color.swatches.primary-60}",
        "$type": "color",
        "$description": "primary role → Primary 60"
      },
      "primary-hover": {
        "$value": "{color.swatches.primary-40}",
        "$type": "color",
        "$description": "primary-hover role → Primary 40"
      },
      "accent": {
        "$value": "{color.swatches.secondary-100}",
        "$type": "color",
        "$description": "accent role → Secondary 100"
      },
      "accent-hover": {
        "$value": "{color.swatches.secondary-80}",
        "$type": "color",
        "$description": "accent-hover role → Secondary 80"
      },
      "warning": {
        "$value": "{color.swatches.warning}",
        "$type": "color",
        "$description": "warning role → Warning"
      },
      "warning-hover": {
        "$value": "{color.swatches.secondary-120}",
        "$type": "color",
        "$description": "warning-hover role → Secondary 120"
      },
      "error": {
        "$value": "{color.swatches.error}",
        "$type": "color",
        "$description": "error role → Error"
      },
      "success": {
        "$value": "{color.swatches.success}",
        "$type": "color",
        "$description": "success role → Success"
      },
      "border": {
        "$value": "{color.swatches.primary-140}",
        "$type": "color",
        "$description": "border role → Primary 140"
      },
      "brand-overrides": {
        "$description": "Brand-level role overrides (take precedence over palette role mappings)",
        "identity": {
          "$value": "{color.swatches.white}",
          "$type": "color",
          "$description": "Brand role identity → White"
        },
        "on-identity": {
          "$value": "{color.swatches.dark-100}",
          "$type": "color",
          "$description": "Brand role on-identity → Dark 100"
        },
        "primary": {
          "$value": "{color.swatches.branding}",
          "$type": "color",
          "$description": "Brand role primary → Branding"
        },
        "primary-hover": {
          "$value": "{color.swatches.primary-140}",
          "$type": "color",
          "$description": "Brand role primary-hover → Primary 140"
        },
        "accent": {
          "$value": "{color.swatches.secondary-100}",
          "$type": "color",
          "$description": "Brand role accent → Secondary 100"
        },
        "accent-hover": {
          "$value": "{color.swatches.secondary-140}",
          "$type": "color",
          "$description": "Brand role accent-hover → Secondary 140"
        },
        "mark": {
          "$value": "{color.swatches.branding}",
          "$type": "color",
          "$description": "Brand role mark → Branding"
        },
        "success": {
          "$value": "{color.swatches.success}",
          "$type": "color",
          "$description": "Brand role success → Success"
        },
        "warning": {
          "$value": "{color.swatches.warning}",
          "$type": "color",
          "$description": "Brand role warning → Warning"
        },
        "error": {
          "$value": "{color.swatches.error}",
          "$type": "color",
          "$description": "Brand role error → Error"
        },
        "text-primary-light": {
          "$value": "{color.swatches.dark-100}",
          "$type": "color",
          "$description": "Brand role text-primary-light → Dark 100"
        },
        "text-primary-dark": {
          "$value": "{color.swatches.neutral-60}",
          "$type": "color",
          "$description": "Brand role text-primary-dark → Neutral 60"
        },
        "background-light": {
          "$value": "{color.swatches.background}",
          "$type": "color",
          "$description": "Brand role background-light → Background"
        },
        "background-dark": {
          "$value": "{color.swatches.primary-180}",
          "$type": "color",
          "$description": "Brand role background-dark → Primary 180"
        },
        "surface-light": {
          "$value": "{color.swatches.neutral-40}",
          "$type": "color",
          "$description": "Brand role surface-light → Neutral 40"
        },
        "surface-dark": {
          "$value": "{color.swatches.primary-160}",
          "$type": "color",
          "$description": "Brand role surface-dark → Primary 160"
        },
        "text-secondary-light": {
          "$value": "{color.swatches.dark-80}",
          "$type": "color",
          "$description": "Brand role text-secondary-light → Dark 80"
        },
        "text-tertiary-light": {
          "$value": "{color.swatches.dark-60}",
          "$type": "color",
          "$description": "Brand role text-tertiary-light → Dark 60"
        },
        "border-light": {
          "$value": "{color.swatches.neutral-100}",
          "$type": "color",
          "$description": "Brand role border-light → Neutral 100"
        }
      }
    }
  },
  "font": {
    "$description": "Typography roles mapped to font atoms",
    "heading": {
      "family": {
        "$value": [
          "Public Sans",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "heading role → Public Sans (public-sans@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "900": {
          "$value": 900,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "body": {
      "family": {
        "$value": [
          "Manrope",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ],
        "$type": "fontFamily",
        "$description": "body role → Manrope (manrope@1.0.0)"
      },
      "weight": {
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "800": {
          "$value": 800,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    },
    "mono": {
      "family": {
        "$value": [
          "Roboto Mono",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "Liberation Mono",
          "Courier New",
          "monospace"
        ],
        "$type": "fontFamily",
        "$description": "mono role → Roboto Mono (roboto-mono@1.0.0)"
      },
      "weight": {
        "100": {
          "$value": 100,
          "$type": "fontWeight"
        },
        "200": {
          "$value": 200,
          "$type": "fontWeight"
        },
        "300": {
          "$value": 300,
          "$type": "fontWeight"
        },
        "400": {
          "$value": 400,
          "$type": "fontWeight"
        },
        "500": {
          "$value": 500,
          "$type": "fontWeight"
        },
        "600": {
          "$value": 600,
          "$type": "fontWeight"
        },
        "700": {
          "$value": 700,
          "$type": "fontWeight"
        },
        "$description": "Available font weights"
      }
    }
  }
}