{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Sundsvalls kommun – designtokens för digitala tjänster. Primitiva skalor är härledda i OKLCH från profilfärgerna; profilfärgernas exakta hex-värden är bevarade på sina ankarsteg. v0.2: höjd grundkontrast för TV/projektor (ytor ≥ 1.18:1 + kant ≥ 2:1; mjuka statusytor steg 200 + kant steg 500) och läget high-contrast (data-contrast=\"high\" / prefers-contrast: more).",
  "color": {
    "primitive": {
      "gronsta": {
        "50": {
          "$type": "color",
          "$value": "#f3fef3"
        },
        "100": {
          "$type": "color",
          "$value": "#e0f6de"
        },
        "200": {
          "$type": "color",
          "$value": "#bfefcc"
        },
        "300": {
          "$type": "color",
          "$value": "#9ddeaf"
        },
        "400": {
          "$type": "color",
          "$value": "#74c48d"
        },
        "500": {
          "$type": "color",
          "$value": "#48a76a"
        },
        "600": {
          "$type": "color",
          "$value": "#278e52"
        },
        "700": {
          "$type": "color",
          "$value": "#00733b"
        },
        "800": {
          "$type": "color",
          "$value": "#045d2f"
        },
        "900": {
          "$type": "color",
          "$value": "#004621"
        },
        "950": {
          "$type": "color",
          "$value": "#003015"
        }
      },
      "vattjom": {
        "50": {
          "$type": "color",
          "$value": "#f3fcfe"
        },
        "100": {
          "$type": "color",
          "$value": "#daeff1"
        },
        "200": {
          "$type": "color",
          "$value": "#cce4ff"
        },
        "300": {
          "$type": "color",
          "$value": "#a6d1fe"
        },
        "400": {
          "$type": "color",
          "$value": "#7eb4ed"
        },
        "500": {
          "$type": "color",
          "$value": "#5595d5"
        },
        "600": {
          "$type": "color",
          "$value": "#327cc2"
        },
        "700": {
          "$type": "color",
          "$value": "#1264a9"
        },
        "800": {
          "$type": "color",
          "$value": "#005595"
        },
        "900": {
          "$type": "color",
          "$value": "#003a69"
        },
        "950": {
          "$type": "color",
          "$value": "#00274a"
        }
      },
      "bjornstigen": {
        "50": {
          "$type": "color",
          "$value": "#f9f9ff"
        },
        "100": {
          "$type": "color",
          "$value": "#f0eef9"
        },
        "200": {
          "$type": "color",
          "$value": "#d7dbf2"
        },
        "300": {
          "$type": "color",
          "$value": "#dbc0ec"
        },
        "400": {
          "$type": "color",
          "$value": "#c49edb"
        },
        "500": {
          "$type": "color",
          "$value": "#a97ac5"
        },
        "600": {
          "$type": "color",
          "$value": "#945db3"
        },
        "700": {
          "$type": "color",
          "$value": "#7f419f"
        },
        "800": {
          "$type": "color",
          "$value": "#692a88"
        },
        "900": {
          "$type": "color",
          "$value": "#5b1f78"
        },
        "950": {
          "$type": "color",
          "$value": "#3c0054"
        }
      },
      "juniskar": {
        "50": {
          "$type": "color",
          "$value": "#fff8f9"
        },
        "100": {
          "$type": "color",
          "$value": "#faecf0"
        },
        "200": {
          "$type": "color",
          "$value": "#fedfe2"
        },
        "300": {
          "$type": "color",
          "$value": "#feb1d8"
        },
        "400": {
          "$type": "color",
          "$value": "#f583c1"
        },
        "500": {
          "$type": "color",
          "$value": "#e153a6"
        },
        "600": {
          "$type": "color",
          "$value": "#cb298f"
        },
        "700": {
          "$type": "color",
          "$value": "#a90074"
        },
        "800": {
          "$type": "color",
          "$value": "#89055e"
        },
        "900": {
          "$type": "color",
          "$value": "#690047"
        },
        "950": {
          "$type": "color",
          "$value": "#4a0030"
        }
      },
      "neutral": {
        "0": {
          "$type": "color",
          "$value": "#ffffff"
        },
        "50": {
          "$type": "color",
          "$value": "#f8fafd"
        },
        "100": {
          "$type": "color",
          "$value": "#f1f4f6"
        },
        "200": {
          "$type": "color",
          "$value": "#ececec"
        },
        "300": {
          "$type": "color",
          "$value": "#d2d6da"
        },
        "400": {
          "$type": "color",
          "$value": "#b4b8bc"
        },
        "500": {
          "$type": "color",
          "$value": "#919498"
        },
        "600": {
          "$type": "color",
          "$value": "#707377"
        },
        "700": {
          "$type": "color",
          "$value": "#4b4b4b"
        },
        "800": {
          "$type": "color",
          "$value": "#3c3d3f"
        },
        "900": {
          "$type": "color",
          "$value": "#252728"
        },
        "950": {
          "$type": "color",
          "$value": "#151618"
        },
        "1000": {
          "$type": "color",
          "$value": "#000000"
        }
      },
      "warning": {
        "50": {
          "$type": "color",
          "$value": "#fff9f2"
        },
        "100": {
          "$type": "color",
          "$value": "#ffedda"
        },
        "200": {
          "$type": "color",
          "$value": "#ffd8ad"
        },
        "300": {
          "$type": "color",
          "$value": "#fdbc6f"
        },
        "400": {
          "$type": "color",
          "$value": "#e9a03e"
        },
        "500": {
          "$type": "color",
          "$value": "#d0860f"
        },
        "600": {
          "$type": "color",
          "$value": "#b07004"
        },
        "700": {
          "$type": "color",
          "$value": "#915c06"
        },
        "800": {
          "$type": "color",
          "$value": "#734804"
        },
        "900": {
          "$type": "color",
          "$value": "#563502"
        },
        "950": {
          "$type": "color",
          "$value": "#3c2200"
        },
        "$description": "Föreslaget funktionellt tillägg utanför profilen – kräver beslut."
      }
    },
    "semantic": {
      "background": {
        "$type": "color",
        "$value": "{color.primitive.neutral.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.200}",
            "dark": "{color.primitive.neutral.950}",
            "high-contrast": "{color.primitive.neutral.300}"
          }
        }
      },
      "surface": {
        "$type": "color",
        "$value": "{color.primitive.neutral.0}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.0}",
            "dark": "{color.primitive.neutral.900}"
          }
        }
      },
      "surface-raised": {
        "$type": "color",
        "$value": "{color.primitive.neutral.0}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.0}",
            "dark": "{color.primitive.neutral.800}"
          }
        }
      },
      "surface-sunken": {
        "$type": "color",
        "$value": "{color.primitive.neutral.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.200}",
            "dark": "{color.primitive.neutral.950}",
            "high-contrast": "{color.primitive.neutral.300}"
          }
        }
      },
      "foreground": {
        "$type": "color",
        "$value": "{color.primitive.neutral.900}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.900}",
            "dark": "{color.primitive.neutral.100}"
          }
        }
      },
      "foreground-muted": {
        "$type": "color",
        "$value": "{color.primitive.neutral.700}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.700}",
            "dark": "{color.primitive.neutral.400}",
            "high-contrast": "{color.primitive.neutral.800}"
          }
        }
      },
      "border": {
        "$type": "color",
        "$value": "{color.primitive.neutral.400}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.400}",
            "dark": "{color.primitive.neutral.700}",
            "high-contrast": "{color.primitive.neutral.600}"
          }
        }
      },
      "border-strong": {
        "$type": "color",
        "$value": "{color.primitive.neutral.500}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.500}",
            "dark": "{color.primitive.neutral.600}",
            "high-contrast": "{color.primitive.neutral.700}"
          }
        }
      },
      "primary": {
        "$type": "color",
        "$value": "{brand.primary}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{brand.primary}",
            "dark": "{brand.300}"
          }
        }
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "{color.primitive.neutral.0}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.neutral.0}",
            "dark": "{brand.950}"
          }
        }
      },
      "primary-hover": {
        "$type": "color",
        "$value": "{brand.primary-hover}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{brand.primary-hover}",
            "dark": "{brand.200}"
          }
        }
      },
      "primary-soft": {
        "$type": "color",
        "$value": "{brand.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{brand.200}",
            "dark": "{brand.950}",
            "high-contrast": "{brand.300}"
          }
        }
      },
      "primary-soft-foreground": {
        "$type": "color",
        "$value": "{brand.900}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{brand.900}",
            "dark": "{brand.200}"
          }
        }
      },
      "ring": {
        "$type": "color",
        "$value": "{brand.600}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{brand.600}",
            "dark": "{brand.400}",
            "high-contrast": "{brand.800}"
          }
        }
      },
      "success": {
        "$type": "color",
        "$value": "{color.primitive.gronsta.700}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.gronsta.700}",
            "dark": "{color.primitive.gronsta.400}"
          }
        }
      },
      "success-soft": {
        "$type": "color",
        "$value": "{color.primitive.gronsta.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.gronsta.200}",
            "dark": "{color.primitive.gronsta.950}",
            "high-contrast": "{color.primitive.gronsta.300}"
          }
        }
      },
      "info": {
        "$type": "color",
        "$value": "{color.primitive.vattjom.800}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.vattjom.800}",
            "dark": "{color.primitive.vattjom.400}"
          }
        }
      },
      "info-soft": {
        "$type": "color",
        "$value": "{color.primitive.vattjom.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.vattjom.200}",
            "dark": "{color.primitive.vattjom.950}",
            "high-contrast": "{color.primitive.vattjom.300}"
          }
        }
      },
      "destructive": {
        "$type": "color",
        "$value": "{color.primitive.juniskar.700}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.juniskar.700}",
            "dark": "{color.primitive.juniskar.400}"
          }
        }
      },
      "destructive-soft": {
        "$type": "color",
        "$value": "{color.primitive.juniskar.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.juniskar.200}",
            "dark": "{color.primitive.juniskar.950}",
            "high-contrast": "{color.primitive.juniskar.300}"
          }
        }
      },
      "warning": {
        "$type": "color",
        "$value": "{color.primitive.warning.700}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.warning.700}",
            "dark": "{color.primitive.warning.400}"
          }
        }
      },
      "warning-soft": {
        "$type": "color",
        "$value": "{color.primitive.warning.200}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.warning.200}",
            "dark": "{color.primitive.warning.950}",
            "high-contrast": "{color.primitive.warning.300}"
          }
        }
      },
      "primary-soft-border": {
        "$type": "color",
        "$value": "{brand.500}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{brand.500}",
            "dark": "{brand.600}",
            "high-contrast": "{brand.700}"
          }
        }
      },
      "success-soft-foreground": {
        "$type": "color",
        "$value": "{color.primitive.gronsta.900}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.gronsta.900}",
            "dark": "{color.primitive.gronsta.200}",
            "high-contrast": "{color.primitive.gronsta.950}"
          }
        }
      },
      "success-soft-border": {
        "$type": "color",
        "$value": "{color.primitive.gronsta.500}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.gronsta.500}",
            "dark": "{color.primitive.gronsta.600}",
            "high-contrast": "{color.primitive.gronsta.700}"
          }
        }
      },
      "info-soft-foreground": {
        "$type": "color",
        "$value": "{color.primitive.vattjom.900}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.vattjom.900}",
            "dark": "{color.primitive.vattjom.200}",
            "high-contrast": "{color.primitive.vattjom.950}"
          }
        }
      },
      "info-soft-border": {
        "$type": "color",
        "$value": "{color.primitive.vattjom.500}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.vattjom.500}",
            "dark": "{color.primitive.vattjom.600}",
            "high-contrast": "{color.primitive.vattjom.700}"
          }
        }
      },
      "destructive-soft-foreground": {
        "$type": "color",
        "$value": "{color.primitive.juniskar.900}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.juniskar.900}",
            "dark": "{color.primitive.juniskar.200}",
            "high-contrast": "{color.primitive.juniskar.950}"
          }
        }
      },
      "destructive-soft-border": {
        "$type": "color",
        "$value": "{color.primitive.juniskar.500}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.juniskar.500}",
            "dark": "{color.primitive.juniskar.600}",
            "high-contrast": "{color.primitive.juniskar.700}"
          }
        }
      },
      "warning-soft-foreground": {
        "$type": "color",
        "$value": "{color.primitive.warning.900}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.warning.900}",
            "dark": "{color.primitive.warning.200}",
            "high-contrast": "{color.primitive.warning.950}"
          }
        }
      },
      "warning-soft-border": {
        "$type": "color",
        "$value": "{color.primitive.warning.500}",
        "$extensions": {
          "se.sundsvall.modes": {
            "light": "{color.primitive.warning.500}",
            "dark": "{color.primitive.warning.600}",
            "high-contrast": "{color.primitive.warning.700}"
          }
        }
      }
    }
  },
  "brand": {
    "$description": "Verksamhetstema. Sätts en gång per tjänst via data-brand. Standard: vattjom.",
    "themes": {
      "vattjom": {
        "primary": "{color.primitive.vattjom.800}",
        "scale": "{color.primitive.vattjom}"
      },
      "gronsta": {
        "primary": "{color.primitive.gronsta.700}",
        "scale": "{color.primitive.gronsta}"
      },
      "bjornstigen": {
        "primary": "{color.primitive.bjornstigen.900}",
        "scale": "{color.primitive.bjornstigen}"
      },
      "juniskar": {
        "primary": "{color.primitive.juniskar.700}",
        "scale": "{color.primitive.juniskar}"
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": "4px"
    },
    "md": {
      "$type": "dimension",
      "$value": "8px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "12px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "20px"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px"
    },
    "$description": "Hierarki: sm = kontroller i tabeller/chips, md = knappar/fält, lg = kort, xl = dialoger/paneler."
  },
  "space": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "10": {
      "$type": "dimension",
      "$value": "40px"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px"
    },
    "20": {
      "$type": "dimension",
      "$value": "80px"
    },
    "24": {
      "$type": "dimension",
      "$value": "96px"
    }
  },
  "typography": {
    "family": {
      "ui": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "system-ui",
          "sans-serif"
        ]
      },
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Raleway",
          "Inter",
          "sans-serif"
        ]
      },
      "mono": {
        "$type": "fontFamily",
        "$value": [
          "JetBrains Mono",
          "ui-monospace",
          "monospace"
        ]
      }
    },
    "size": {
      "xs": {
        "$type": "dimension",
        "$value": "12px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "14px"
      },
      "md": {
        "$type": "dimension",
        "$value": "16px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "18px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "22px"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "28px"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "36px"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "48px"
      }
    },
    "leading": {
      "tight": {
        "$value": 1.15
      },
      "normal": {
        "$value": 1.5
      },
      "relaxed": {
        "$value": 1.65
      }
    }
  },
  "elevation": {
    "0": {
      "$type": "shadow",
      "$value": "none",
      "$description": "Platt: sitter i sidan (listrader, tabeller)"
    },
    "1": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,37,74,.06), 0 0 0 1px rgba(0,37,74,.06)",
      "$description": "Kort på bakgrund"
    },
    "2": {
      "$type": "shadow",
      "$value": "0 4px 12px rgba(0,37,74,.10), 0 1px 3px rgba(0,37,74,.08)",
      "$description": "Popover, dropdown, upphöjt kort vid hover"
    },
    "3": {
      "$type": "shadow",
      "$value": "0 16px 40px rgba(0,37,74,.18), 0 2px 8px rgba(0,37,74,.10)",
      "$description": "Dialog, sheet"
    }
  },
  "motion": {
    "fast": {
      "$type": "duration",
      "$value": "120ms"
    },
    "base": {
      "$type": "duration",
      "$value": "200ms"
    },
    "slow": {
      "$type": "duration",
      "$value": "320ms"
    },
    "ease": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0,
        1
      ]
    }
  },
  "contrast-rules": {
    "$description": "Testbara regler. Lint och CI kontrollerar dem mot tokens.",
    "adjacent-surfaces-min": 1.18,
    "surface-border-min": 2.0,
    "ui-component-border-min": 3.0,
    "text-min": 4.5,
    "large-text-min": 3.0,
    "high-contrast": {
      "adjacent-surfaces-min": 1.45,
      "surface-border-min": 4.5
    },
    "principle": "Ingen information bärs av en ljus ton ensam: mjuka ytor har alltid kant och ikon."
  }
}