{
  "$description": "Wine Chips design tokens, W3C DTCG format, generated from the style-guide master's effective guide (brand winechips v1 on channel stable, theme editorial).",
  "color": {
    "editorial": {
      "$description": "Storefront",
      "light": {
        "$description": "Storefront",
        "wc-accent": {
          "$description": "The signal — announcement rail, primary button, active nav",
          "$type": "color",
          "$value": "#A6192E"
        },
        "wc-accent-hover": {
          "$description": "The signal at hover",
          "$type": "color",
          "$value": "#DA213C"
        },
        "wc-action": {
          "$description": "The neutral button fill the theme still ships",
          "$type": "color",
          "$value": "#3A3A3A"
        },
        "wc-action-hover": {
          "$description": "The neutral button at hover",
          "$type": "color",
          "$value": "#606060"
        },
        "wc-border": {
          "$description": "The default hairline",
          "$type": "color",
          "$value": "#EBEBEB"
        },
        "wc-border-form": {
          "$description": "A control edge",
          "$type": "color",
          "$value": "#CCCCCC"
        },
        "wc-border-strong": {
          "$description": "A control edge, emphasised",
          "$type": "color",
          "$value": "#B3B3B3"
        },
        "wc-cream": {
          "$description": "The warm ground",
          "$type": "color",
          "$value": "#FBF3DA"
        },
        "wc-fill-soft": {
          "$description": "A plum wash — empty states, chips",
          "$type": "color",
          "$value": "rgba(81, 42, 68, 0.10)"
        },
        "wc-fill-strong": {
          "$description": "A plum wash, emphasised",
          "$type": "color",
          "$value": "rgba(81, 42, 68, 0.20)"
        },
        "wc-fill-subtle": {
          "$description": "The lightest plum wash",
          "$type": "color",
          "$value": "rgba(81, 42, 68, 0.05)"
        },
        "wc-focus-ring": {
          "$description": "The focus halo",
          "$type": "color",
          "$value": "rgba(81, 42, 68, 0.25)"
        },
        "wc-graphite": {
          "$description": "The shipped neutral action fill",
          "$type": "color",
          "$value": "#3A3A3A"
        },
        "wc-graphite-deep": {
          "$description": "Graphite pressed",
          "$type": "color",
          "$value": "#212121"
        },
        "wc-hairline-footer": {
          "$description": "The footer rule",
          "$type": "color",
          "$value": "#DFD8DC"
        },
        "wc-in-stock": {
          "$description": "The in-stock mark",
          "$type": "color",
          "$value": "#00730B"
        },
        "wc-ink": {
          "$description": "Body copy, headings, links, the wordmark",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-ink-dim": {
          "$description": "Footer link hover, meta text",
          "$type": "color",
          "$value": "#5A5858"
        },
        "wc-ink-muted": {
          "$description": "The footer's secondary ink",
          "$type": "color",
          "$value": "#333232"
        },
        "wc-link": {
          "$description": "A link at rest — the same plum as body copy",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-link-hover": {
          "$description": "A link at hover and focus",
          "$type": "color",
          "$value": "#83446E"
        },
        "wc-negative": {
          "$description": "Error fill, rule and ink",
          "$type": "color",
          "$value": "#D20000"
        },
        "wc-negative-bg": {
          "$description": "Error message ground",
          "$type": "color",
          "$value": "#FFF8F8"
        },
        "wc-negative-ink": {
          "$description": "Error message body copy",
          "$type": "color",
          "$value": "#651818"
        },
        "wc-on-accent": {
          "$description": "Label on the signal",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-on-action": {
          "$description": "Label on the neutral fill",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-on-ink": {
          "$description": "Ink on a plum or graphite fill",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-plum": {
          "$description": "The brand ink and the wordmark colour",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-plum-light": {
          "$description": "Plum at focus",
          "$type": "color",
          "$value": "#83446E"
        },
        "wc-positive": {
          "$description": "Success fill and rule",
          "$type": "color",
          "$value": "#1F873D"
        },
        "wc-positive-bg": {
          "$description": "Success message ground",
          "$type": "color",
          "$value": "#F8FFF9"
        },
        "wc-positive-ink": {
          "$description": "Success as small text",
          "$type": "color",
          "$value": "#1D7E39"
        },
        "wc-sale": {
          "$description": "The sale price",
          "$type": "color",
          "$value": "#EA0606"
        },
        "wc-sale-ink": {
          "$description": "The sale price as small text",
          "$type": "color",
          "$value": "#DD0606"
        },
        "wc-surface": {
          "$description": "The page",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-surface-alt": {
          "$description": "The wash — feature rows, the footer, alternating sections",
          "$type": "color",
          "$value": "#F6F4F5"
        },
        "wc-surface-warm": {
          "$description": "The cream band — logo lists, press strips, 'as seen on'",
          "$type": "color",
          "$value": "#FBF3DA"
        },
        "wc-white": {
          "$description": "Paper",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-wine": {
          "$description": "The single signal accent",
          "$type": "color",
          "$value": "#A6192E"
        },
        "wc-wine-bright": {
          "$description": "The wine at hover",
          "$type": "color",
          "$value": "#DA213C"
        }
      }
    },
    "inverted": {
      "$description": "Plum block",
      "light": {
        "$description": "Storefront",
        "wc-accent": {
          "$description": "The signal on a plum block — the cream, not the wine",
          "$type": "color",
          "$value": "#FBF3DA"
        },
        "wc-accent-hover": {
          "$description": "The signal at hover",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-action": {
          "$description": "The outline button the storefront ships on dark art",
          "$type": "color",
          "$value": "#FFFFFF"
        },
        "wc-action-hover": {
          "$description": "That outline at hover",
          "$type": "color",
          "$value": "#FBF3DA"
        },
        "wc-border": {
          "$description": "Hairline on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.16)"
        },
        "wc-border-form": {
          "$description": "Control edge on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.32)"
        },
        "wc-border-strong": {
          "$description": "Emphasised edge on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.55)"
        },
        "wc-fill-soft": {
          "$description": "Wash on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.10)"
        },
        "wc-fill-strong": {
          "$description": "Emphasised wash on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.20)"
        },
        "wc-fill-subtle": {
          "$description": "Lightest wash on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.05)"
        },
        "wc-focus-ring": {
          "$description": "The focus halo on a plum block",
          "$type": "color",
          "$value": "rgba(251, 243, 218, 0.55)"
        },
        "wc-hairline-footer": {
          "$description": "Rule on a plum block",
          "$type": "color",
          "$value": "rgba(250, 246, 249, 0.20)"
        },
        "wc-in-stock": {
          "$description": "The in-stock mark on a plum block",
          "$type": "color",
          "$value": "#8FE6A8"
        },
        "wc-ink": {
          "$description": "Body copy and headings on a plum block",
          "$type": "color",
          "$value": "#FAF6F9"
        },
        "wc-ink-dim": {
          "$description": "Meta ink on a plum block",
          "$type": "color",
          "$value": "#DAC8D4"
        },
        "wc-ink-muted": {
          "$description": "Secondary ink on a plum block",
          "$type": "color",
          "$value": "#E2D4DE"
        },
        "wc-link": {
          "$description": "A link on a plum block",
          "$type": "color",
          "$value": "#FAF6F9"
        },
        "wc-link-hover": {
          "$description": "A link at hover on a plum block",
          "$type": "color",
          "$value": "#FBF3DA"
        },
        "wc-negative": {
          "$description": "Error on a plum block",
          "$type": "color",
          "$value": "#FFBDBD"
        },
        "wc-negative-bg": {
          "$description": "Error ground on a plum block",
          "$type": "color",
          "$value": "#531313"
        },
        "wc-negative-ink": {
          "$description": "Error body copy on a plum block",
          "$type": "color",
          "$value": "#FFE1E1"
        },
        "wc-on-accent": {
          "$description": "Label on the cream signal",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-on-action": {
          "$description": "Ink inside a knocked-out button once it fills",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-on-ink": {
          "$description": "Ink on a light fill inside a plum block",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-positive-ink": {
          "$description": "Success as text on a plum block",
          "$type": "color",
          "$value": "#8FE6A8"
        },
        "wc-sale-ink": {
          "$description": "The sale price on a plum block",
          "$type": "color",
          "$value": "#FFBEBE"
        },
        "wc-surface": {
          "$description": "The plum block",
          "$type": "color",
          "$value": "#512A44"
        },
        "wc-surface-alt": {
          "$description": "One step out of the block",
          "$type": "color",
          "$value": "#5E314F"
        },
        "wc-surface-warm": {
          "$description": "The wine band — the right-hand stop of the signature gradient",
          "$type": "color",
          "$value": "#A6192E"
        }
      }
    }
  },
  "cubicBezier": {
    "wc-ease": {
      "$description": "The storefront's default — every hover, reveal and slideshow transition",
      "$type": "cubicBezier",
      "$value": [
        0.29,
        0.63,
        0.44,
        1
      ]
    },
    "wc-ease-quick": {
      "$description": "A dense control: the quantity stepper, a disclosure toggle",
      "$type": "cubicBezier",
      "$value": [
        0.44,
        0.13,
        0.48,
        0.87
      ]
    }
  },
  "dimension": {
    "radius": {
      "max": {
        "$description": "The brand's maximum corner radius (rules.radius.max).",
        "$type": "dimension",
        "$value": {
          "unit": "rem",
          "value": 0.75
        }
      }
    },
    "space": {
      "wc-space-block": {
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 35
        }
      },
      "wc-space-grid": {
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 30
        }
      },
      "wc-space-grid-sm": {
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 22
        }
      },
      "wc-space-gutter": {
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 55
        }
      },
      "wc-space-gutter-sm": {
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 22
        }
      }
    },
    "structure": {
      "wc-border-width": {
        "$description": "Every hairline; a knockout button on dark art is 2px",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 1
        }
      },
      "wc-focus-width": {
        "$description": "The focus halo (3px on dense controls)",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 4
        }
      },
      "wc-header-logo-max": {
        "$description": ".site-header__logo-image, the shop's own setting",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 250
        }
      },
      "wc-page-max": {
        "$description": ".page-width — the only content measure in the system",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 1200
        }
      },
      "wc-radius": {
        "$description": "Buttons, inputs, cards, the input group's outer corners",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 2
        }
      },
      "wc-radius-pill": {
        "$description": "The one pill in the system",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 25
        }
      }
    },
    "type": {
      "wc-space-heading": {
        "$description": "the bottom margin of every heading",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 17.5
        }
      },
      "wc-space-paragraph": {
        "$description": "the bottom margin of a paragraph",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 19.444
        }
      },
      "wc-text-base": {
        "$description": "body, button, input, select, textarea — the storefront's --font-size-base, at line-height 1.5",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 14
        }
      },
      "wc-text-lead": {
        "$description": "--font-rich-text-large, and the announcement rail message",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 16
        }
      },
      "wc-text-mega": {
        "$description": "--font-mega-title-large-desktop — the slideshow's largest headline cut, desktop only",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 90
        }
      },
      "wc-text-pagination": {
        "$description": ".pagination",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 15
        }
      },
      "wc-text-small": {
        "$description": "--font-rich-text-small, legal and meta copy — the type floor",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 12
        }
      },
      "wc-tracking-ui": {
        "$description": ".btn, #SiteNav — uppercase buttons and navigation",
        "$type": "dimension",
        "$value": {
          "unit": "px",
          "value": 1
        }
      }
    }
  },
  "duration": {
    "wc-duration-base": {
      "$description": "The default — image reveals, slideshow slides, drawer open",
      "$type": "duration",
      "$value": {
        "unit": "ms",
        "value": 450
      }
    },
    "wc-duration-instant": {
      "$description": "A background-colour change (button, announcement rail)",
      "$type": "duration",
      "$value": {
        "unit": "ms",
        "value": 100
      }
    },
    "wc-duration-quick": {
      "$description": "A small hover: icon, chip, nav item",
      "$type": "duration",
      "$value": {
        "unit": "ms",
        "value": 200
      }
    },
    "wc-duration-spin": {
      "$description": "One rotation of the loading spinner",
      "$type": "duration",
      "$value": {
        "unit": "ms",
        "value": 500
      }
    }
  },
  "fontFamily": {
    "font-display": {
      "$description": "Every heading level, the announcement rail, and nothing else. Arvo is the brand's voice at size; it never sets body copy, UI labels or a data value.",
      "$type": "fontFamily",
      "$value": [
        "Arvo",
        "Rockwell",
        "Roboto Slab",
        "Georgia",
        "serif"
      ]
    },
    "font-sans": {
      "$description": "Body copy, product copy, buttons, navigation, form fields, prices, legal text, and every word of the operator register.",
      "$type": "fontFamily",
      "$value": [
        "Montserrat",
        "Helvetica Neue",
        "Helvetica",
        "Arial",
        "sans-serif"
      ]
    }
  }
}