Shadow System

:root {
  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24);
  --shadow-md: 0px 3px 6px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0px 10px 20px 0px rgba(0, 0, 0, 0.15), 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 5px 10px 0px rgba(0, 0, 0, 0.12);
  --shadow-2xl: 0px 19px 38px 0px rgba(0, 0, 0, 0.3), 0px 15px 12px 0px rgba(0, 0, 0, 0.22);
}

// tailwind.config.ts → theme.extend.boxShadow
{
  "sm": "0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24)",
  "md": "0px 3px 6px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.12)",
  "lg": "0px 10px 20px 0px rgba(0, 0, 0, 0.15), 0px 3px 6px 0px rgba(0, 0, 0, 0.1)",
  "xl": "0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 5px 10px 0px rgba(0, 0, 0, 0.12)",
  "2xl": "0px 19px 38px 0px rgba(0, 0, 0, 0.3), 0px 15px 12px 0px rgba(0, 0, 0, 0.22)"
}

{
  "shadow": {
    "sm": {
      "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.24)",
      "type": "boxShadow",
      "layers": [
        {
          "x": 0,
          "y": 1,
          "blur": 3,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.12)"
        },
        {
          "x": 0,
          "y": 1,
          "blur": 2,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.24)"
        }
      ]
    },
    "md": {
      "value": "0px 3px 6px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.12)",
      "type": "boxShadow",
      "layers": [
        {
          "x": 0,
          "y": 3,
          "blur": 6,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.15)"
        },
        {
          "x": 0,
          "y": 2,
          "blur": 4,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.12)"
        }
      ]
    },
    "lg": {
      "value": "0px 10px 20px 0px rgba(0, 0, 0, 0.15), 0px 3px 6px 0px rgba(0, 0, 0, 0.1)",
      "type": "boxShadow",
      "layers": [
        {
          "x": 0,
          "y": 10,
          "blur": 20,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.15)"
        },
        {
          "x": 0,
          "y": 3,
          "blur": 6,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.1)"
        }
      ]
    },
    "xl": {
      "value": "0px 14px 28px 0px rgba(0, 0, 0, 0.25), 0px 5px 10px 0px rgba(0, 0, 0, 0.12)",
      "type": "boxShadow",
      "layers": [
        {
          "x": 0,
          "y": 14,
          "blur": 28,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.25)"
        },
        {
          "x": 0,
          "y": 5,
          "blur": 10,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.12)"
        }
      ]
    },
    "2xl": {
      "value": "0px 19px 38px 0px rgba(0, 0, 0, 0.3), 0px 15px 12px 0px rgba(0, 0, 0, 0.22)",
      "type": "boxShadow",
      "layers": [
        {
          "x": 0,
          "y": 19,
          "blur": 38,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.3)"
        },
        {
          "x": 0,
          "y": 15,
          "blur": 12,
          "spread": 0,
          "color": "rgba(0, 0, 0, 0.22)"
        }
      ]
    }
  }
}