{
  "$description": "Deep Ocean — design tokens from CSS Crème. The six semantic roles are the source; chart, sidebar and shadow groups are derived from them by fixed rules.",
  "$extensions": {
    "com.csscreme": {
      "source": "https://csscreme.com/themes/deep-ocean",
      "designMd": "https://csscreme.com/d/deep-ocean.md",
      "fingerprint": "fnv1a-b613a475",
      "defaultMode": "dark",
      "derived": [
        "color.*.chart-*",
        "color.*.sidebar-*",
        "shadow.*"
      ]
    }
  },
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "#fafbfc"
      },
      "foreground": {
        "$type": "color",
        "$value": "#1f282b"
      },
      "card": {
        "$type": "color",
        "$value": "#f4f6f8"
      },
      "card-foreground": {
        "$type": "color",
        "$value": "#1f282b"
      },
      "popover": {
        "$type": "color",
        "$value": "#f4f6f8"
      },
      "popover-foreground": {
        "$type": "color",
        "$value": "#1f282b"
      },
      "primary": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "secondary": {
        "$type": "color",
        "$value": "#f6f8f9"
      },
      "secondary-foreground": {
        "$type": "color",
        "$value": "#1f282b"
      },
      "muted": {
        "$type": "color",
        "$value": "#f6f8f9"
      },
      "muted-foreground": {
        "$type": "color",
        "$value": "#687076"
      },
      "accent": {
        "$type": "color",
        "$value": "#5BA7F7"
      },
      "accent-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "destructive": {
        "$type": "color",
        "$value": "#e5484d"
      },
      "destructive-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "border": {
        "$type": "color",
        "$value": "#c7cacd"
      },
      "input": {
        "$type": "color",
        "$value": "#c7cacd"
      },
      "ring": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "chart-1": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "chart-2": {
        "$type": "color",
        "$value": "#5BA7F7"
      },
      "chart-3": {
        "$type": "color",
        "$value": "#365ac2"
      },
      "chart-4": {
        "$type": "color",
        "$value": "#36c270"
      },
      "chart-5": {
        "$type": "color",
        "$value": "#49afdd"
      },
      "sidebar": {
        "$type": "color",
        "$value": "#f7f9fa"
      },
      "sidebar-foreground": {
        "$type": "color",
        "$value": "#1f282b"
      },
      "sidebar-primary": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "sidebar-primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "sidebar-accent": {
        "$type": "color",
        "$value": "#f6f8f9"
      },
      "sidebar-accent-foreground": {
        "$type": "color",
        "$value": "#1f282b"
      },
      "sidebar-border": {
        "$type": "color",
        "$value": "#c7cacd"
      },
      "sidebar-ring": {
        "$type": "color",
        "$value": "#36B7C2"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "#071A2B"
      },
      "foreground": {
        "$type": "color",
        "$value": "#E4F1F6"
      },
      "card": {
        "$type": "color",
        "$value": "#0F2A40"
      },
      "card-foreground": {
        "$type": "color",
        "$value": "#E4F1F6"
      },
      "popover": {
        "$type": "color",
        "$value": "#0F2A40"
      },
      "popover-foreground": {
        "$type": "color",
        "$value": "#E4F1F6"
      },
      "primary": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "secondary": {
        "$type": "color",
        "$value": "#0c2439"
      },
      "secondary-foreground": {
        "$type": "color",
        "$value": "#E4F1F6"
      },
      "muted": {
        "$type": "color",
        "$value": "#0c2439"
      },
      "muted-foreground": {
        "$type": "color",
        "$value": "#7E9AAC"
      },
      "accent": {
        "$type": "color",
        "$value": "#5BA7F7"
      },
      "accent-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "destructive": {
        "$type": "color",
        "$value": "#e5484d"
      },
      "destructive-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "border": {
        "$type": "color",
        "$value": "#283e4f"
      },
      "input": {
        "$type": "color",
        "$value": "#283e4f"
      },
      "ring": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "chart-1": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "chart-2": {
        "$type": "color",
        "$value": "#5BA7F7"
      },
      "chart-3": {
        "$type": "color",
        "$value": "#365ac2"
      },
      "chart-4": {
        "$type": "color",
        "$value": "#36c270"
      },
      "chart-5": {
        "$type": "color",
        "$value": "#49afdd"
      },
      "sidebar": {
        "$type": "color",
        "$value": "#0b2236"
      },
      "sidebar-foreground": {
        "$type": "color",
        "$value": "#E4F1F6"
      },
      "sidebar-primary": {
        "$type": "color",
        "$value": "#36B7C2"
      },
      "sidebar-primary-foreground": {
        "$type": "color",
        "$value": "#0b0b0f"
      },
      "sidebar-accent": {
        "$type": "color",
        "$value": "#0c2439"
      },
      "sidebar-accent-foreground": {
        "$type": "color",
        "$value": "#E4F1F6"
      },
      "sidebar-border": {
        "$type": "color",
        "$value": "#283e4f"
      },
      "sidebar-ring": {
        "$type": "color",
        "$value": "#36B7C2"
      }
    }
  },
  "shadow": {
    "light": {
      "2xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.05)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "0px"
          }
        ]
      },
      "xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.06)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          }
        ]
      },
      "sm": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.08)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          },
          {
            "color": "rgb(31 40 43 / 0.08)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "-1px"
          }
        ]
      },
      "md": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.09)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-1px"
          },
          {
            "color": "rgb(31 40 43 / 0.09)",
            "offsetX": "0px",
            "offsetY": "2px",
            "blur": "4px",
            "spread": "-2px"
          }
        ]
      },
      "lg": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.1)",
            "offsetX": "0px",
            "offsetY": "10px",
            "blur": "15px",
            "spread": "-3px"
          },
          {
            "color": "rgb(31 40 43 / 0.1)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-4px"
          }
        ]
      },
      "xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.12)",
            "offsetX": "0px",
            "offsetY": "20px",
            "blur": "25px",
            "spread": "-5px"
          },
          {
            "color": "rgb(31 40 43 / 0.12)",
            "offsetX": "0px",
            "offsetY": "8px",
            "blur": "10px",
            "spread": "-6px"
          }
        ]
      },
      "2xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(31 40 43 / 0.22)",
            "offsetX": "0px",
            "offsetY": "25px",
            "blur": "50px",
            "spread": "-12px"
          }
        ]
      }
    },
    "dark": {
      "2xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.16)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "0px"
          }
        ]
      },
      "xs": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.18)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          }
        ]
      },
      "sm": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.22)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "3px",
            "spread": "0px"
          },
          {
            "color": "rgb(228 241 246 / 0.22)",
            "offsetX": "0px",
            "offsetY": "1px",
            "blur": "2px",
            "spread": "-1px"
          }
        ]
      },
      "md": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.26)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-1px"
          },
          {
            "color": "rgb(228 241 246 / 0.26)",
            "offsetX": "0px",
            "offsetY": "2px",
            "blur": "4px",
            "spread": "-2px"
          }
        ]
      },
      "lg": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.3)",
            "offsetX": "0px",
            "offsetY": "10px",
            "blur": "15px",
            "spread": "-3px"
          },
          {
            "color": "rgb(228 241 246 / 0.3)",
            "offsetX": "0px",
            "offsetY": "4px",
            "blur": "6px",
            "spread": "-4px"
          }
        ]
      },
      "xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.34)",
            "offsetX": "0px",
            "offsetY": "20px",
            "blur": "25px",
            "spread": "-5px"
          },
          {
            "color": "rgb(228 241 246 / 0.34)",
            "offsetX": "0px",
            "offsetY": "8px",
            "blur": "10px",
            "spread": "-6px"
          }
        ]
      },
      "2xl": {
        "$type": "shadow",
        "$value": [
          {
            "color": "rgb(228 241 246 / 0.45)",
            "offsetX": "0px",
            "offsetY": "25px",
            "blur": "50px",
            "spread": "-12px"
          }
        ]
      }
    }
  },
  "dimension": {
    "radius": {
      "$type": "dimension",
      "$value": "10px"
    },
    "spacing": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Base step of the spacing scale"
    }
  },
  "fontFamily": {
    "heading": {
      "$type": "fontFamily",
      "$value": "Sora"
    },
    "body": {
      "$type": "fontFamily",
      "$value": "Inter"
    }
  }
}