Clark's Herbal Remedies

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "primary": {
      "base": {
        "$value": "#261D77",
        "$type": "color",
        "$description": "Deep Indigo — primary brand color used for all headings and hero text"
      },
      "dark": {
        "$value": "#00549A",
        "$type": "color",
        "$description": "Navy Blue — darker brand accent, gradient endpoint"
      },
      "light": {
        "$value": "#383085",
        "$type": "color",
        "$description": "Medium Purple-Blue — secondary heading color"
      },
      "hover": {
        "$value": "#1A1460",
        "$type": "color",
        "$description": "Deep indigo hover state — 10% darker than base"
      },
      "active": {
        "$value": "#140F4D",
        "$type": "color",
        "$description": "Deep indigo active/pressed state"
      },
      "muted": {
        "$value": "#261D7733",
        "$type": "color",
        "$description": "Primary indigo at 20% opacity for subtle backgrounds"
      }
    },
    "accent": {
      "blue": {
        "$value": "#008AFC",
        "$type": "color",
        "$description": "Bright Blue — primary CTA color, buttons, links"
      },
      "blueHover": {
        "$value": "#0075D6",
        "$type": "color",
        "$description": "CTA blue hover state — slightly darker"
      },
      "skyBlue": {
        "$value": "#0FA2DB",
        "$type": "color",
        "$description": "Sky Blue — secondary accent, section backgrounds, button variant"
      },
      "skyBlueHover": {
        "$value": "#0D8FC2",
        "$type": "color",
        "$description": "Sky blue hover state"
      },
      "mint": {
        "$value": "#B6F3E8",
        "$type": "color",
        "$description": "Mint Green — subtle border accent, herbal freshness indicator"
      },
      "herbalGreen": {
        "$value": "#4CAF50",
        "$type": "color",
        "$description": "Herbal Green — suggested accent for natural/botanical sections"
      },
      "warmPeach": {
        "$value": "#E2AFA7",
        "$type": "color",
        "$description": "Warm Peach — gradient start color, softening element from current site"
      },
      "gold": {
        "$value": "#D4A847",
        "$type": "color",
        "$description": "Gold — premium/quality indicator accent, suggested for new multi-product layout"
      }
    },
    "background": {
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White — primary page background"
      },
      "lightBlue": {
        "$value": "#F0FBFF",
        "$type": "color",
        "$description": "Lightest Blue Tint — alternate section background"
      },
      "skySection": {
        "$value": "#0FA2DB",
        "$type": "color",
        "$description": "Sky Blue section background — used for feature highlight strips"
      },
      "heroOverlay": {
        "$value": "#00549A",
        "$type": "color",
        "$description": "Navy overlay for hero sections"
      },
      "card": {
        "$value": "#F8FCFF",
        "$type": "color",
        "$description": "Very light blue card surface"
      },
      "elevated": {
        "$value": "#EDF7FE",
        "$type": "color",
        "$description": "Slightly tinted elevated surface"
      },
      "dark": {
        "$value": "#1A2332",
        "$type": "color",
        "$description": "Dark background — for footer or dark sections in overhaul"
      },
      "input": {
        "$value": "#F5F9FC",
        "$type": "color",
        "$description": "Input field background"
      },
      "overlay": {
        "$value": "#00549AE6",
        "$type": "color",
        "$description": "Navy overlay at 90% opacity"
      }
    },
    "text": {
      "primary": {
        "$value": "#261D77",
        "$type": "color",
        "$description": "Primary text — deep indigo (matches heading color)"
      },
      "secondary": {
        "$value": "#383085",
        "$type": "color",
        "$description": "Secondary text — purple-blue"
      },
      "body": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Body text — dark grey for readability"
      },
      "muted": {
        "$value": "#656199",
        "$type": "color",
        "$description": "Muted/tertiary text — lighter indigo"
      },
      "inverse": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White text on dark/blue backgrounds"
      },
      "onBlue": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Text on blue CTA buttons"
      },
      "link": {
        "$value": "#116DFF",
        "$type": "color",
        "$description": "Link blue — from Wix default"
      },
      "linkVisited": {
        "$value": "#0000EE",
        "$type": "color",
        "$description": "Visited link color"
      },
      "bodyAlt": {
        "$value": "#2F2E2E",
        "$type": "color",
        "$description": "Dark charcoal body text variant - found in computed styles across all pages"
      }
    },
    "border": {
      "default": {
        "$value": "#DBDBDB",
        "$type": "color",
        "$description": "Default border — light grey"
      },
      "subtle": {
        "$value": "#E8E8E8",
        "$type": "color",
        "$description": "Subtle border — barely visible"
      },
      "focus": {
        "$value": "#008AFC",
        "$type": "color",
        "$description": "Focus ring — bright blue for accessibility"
      },
      "accent": {
        "$value": "#B6F3E8",
        "$type": "color",
        "$description": "Accent border — mint green"
      },
      "dark": {
        "$value": "#324158",
        "$type": "color",
        "$description": "Dark border — from footer/dark sections"
      }
    },
    "status": {
      "success": {
        "$value": "#22C55E",
        "$type": "color",
        "$description": "Success green"
      },
      "warning": {
        "$value": "#EAB308",
        "$type": "color",
        "$description": "Warning yellow"
      },
      "error": {
        "$value": "#EF4444",
        "$type": "color",
        "$description": "Error red"
      },
      "info": {
        "$value": "#008AFC",
        "$type": "color",
        "$description": "Info — matches CTA blue"
      }
    },
    "neutral": {
      "0": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White"
      },
      "1": {
        "$value": "#FAFAFA",
        "$type": "color",
        "$description": "Near-white — body background variant"
      },
      "2": {
        "$value": "#F0FBFF",
        "$type": "color",
        "$description": "Light blue tint"
      },
      "3": {
        "$value": "#B0B0B0",
        "$type": "color",
        "$description": "Medium grey"
      },
      "4": {
        "$value": "#727272",
        "$type": "color",
        "$description": "Dark grey — from Wix palette"
      },
      "5": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Near-black body text"
      },
      "6": {
        "$value": "#1A2332",
        "$type": "color",
        "$description": "Dark background"
      },
      "7": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Black"
      }
    },
    "wixPalette": {
      "peach1": {
        "$value": "#F1BFA3",
        "$type": "color",
        "$description": "Wix color_18 — peach, used in button fills"
      },
      "peach2": {
        "$value": "#F7E0D2",
        "$type": "color",
        "$description": "Wix color_17 — light peach"
      },
      "terracotta": {
        "$value": "#A83725",
        "$type": "color",
        "$description": "Wix color_23 — terracotta red accent"
      },
      "lavender": {
        "$value": "#9A95C9",
        "$type": "color",
        "$description": "Wix color_12 — lavender, secondary background"
      },
      "lightCyan": {
        "$value": "#CEECFB",
        "$type": "color",
        "$description": "Wix color_31 — light cyan blue"
      },
      "mediumCyan": {
        "$value": "#9ED9F7",
        "$type": "color",
        "$description": "Wix color_32 — medium cyan"
      },
      "deepPurple": {
        "$value": "#383085",
        "$type": "color",
        "$description": "Wix color_40 — deep purple for accents"
      }
    }
  },
  "gradient": {
    "heroFade": {
      "$value": "linear-gradient(100deg, rgba(226,175,167,0) 0%, #00549A 100%)",
      "$type": "gradient",
      "$description": "Hero section gradient — warm peach transparency fading to navy blue"
    },
    "skyToWhite": {
      "$value": "linear-gradient(180deg, #0FA2DB 0%, #FFFFFF 100%)",
      "$type": "gradient",
      "$description": "Sky blue to white vertical fade — section dividers"
    },
    "blueDepth": {
      "$value": "linear-gradient(180deg, #008AFC 0%, #00549A 100%)",
      "$type": "gradient",
      "$description": "Blue depth gradient for cards and CTA backgrounds"
    },
    "herbalFresh": {
      "$value": "linear-gradient(135deg, #B6F3E8 0%, #0FA2DB 100%)",
      "$type": "gradient",
      "$description": "Mint to sky blue — botanical freshness gradient"
    },
    "lightBlueWash": {
      "$value": "linear-gradient(180deg, #F0FBFF 0%, #FFFFFF 100%)",
      "$type": "gradient",
      "$description": "Subtle light blue to white — section backgrounds"
    },
    "navyToIndigo": {
      "$value": "linear-gradient(135deg, #00549A 0%, #261D77 100%)",
      "$type": "gradient",
      "$description": "Navy to indigo diagonal — premium/header treatment"
    },
    "headingBlue": {
      "$value": "linear-gradient(90deg, #261D77, #008AFC)",
      "$type": "gradient",
      "$description": "Heading text gradient — indigo to bright blue"
    },
    "warmToBlue": {
      "$value": "linear-gradient(100deg, #E2AFA7, #0FA2DB)",
      "$type": "gradient",
      "$description": "Warm peach to sky blue — transitional gradient"
    }
  },
  "typography": {
    "fontFamily": {
      "heading": {
        "$value": "'Georgia', 'Palatino', 'Book Antiqua', 'Palatino Linotype', serif",
        "$type": "fontFamily",
        "$description": "Georgia serif — main heading font throughout site"
      },
      "body": {
        "$value": "'Open Sans', 'Questrial', sans-serif",
        "$type": "fontFamily",
        "$description": "Open Sans / Questrial — primary body text"
      },
      "accent": {
        "$value": "'Poppins', sans-serif",
        "$type": "fontFamily",
        "$description": "Poppins — used for labels, feature callouts (SemiBold + ExtraLight variants)"
      },
      "nav": {
        "$value": "'Montserrat', sans-serif",
        "$type": "fontFamily",
        "$description": "Montserrat — navigation and UI elements"
      },
      "fine": {
        "$value": "'Avenir LT W01 35 Light', sans-serif",
        "$type": "fontFamily",
        "$description": "Avenir Light — fine print, disclaimers, captions"
      },
      "mono": {
        "$value": "'JetBrains Mono', 'Fira Code', monospace",
        "$type": "fontFamily",
        "$description": "Monospace fallback for code/data elements"
      }
    },
    "fontSize": {
      "xs": {
        "$value": "0.625rem",
        "$type": "dimension",
        "$description": "10px — Wix base, fine print"
      },
      "sm": {
        "$value": "0.8125rem",
        "$type": "dimension",
        "$description": "13px — small labels"
      },
      "base": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "16px — body text"
      },
      "md": {
        "$value": "1.125rem",
        "$type": "dimension",
        "$description": "18px — larger body"
      },
      "lg": {
        "$value": "1.25rem",
        "$type": "dimension",
        "$description": "20px — subheadings, ingredient names"
      },
      "xl": {
        "$value": "1.5625rem",
        "$type": "dimension",
        "$description": "25px — section subheads (Wix H5)"
      },
      "2xl": {
        "$value": "1.875rem",
        "$type": "dimension",
        "$description": "30px — section headings"
      },
      "3xl": {
        "$value": "2rem",
        "$type": "dimension",
        "$description": "32px — medium headings"
      },
      "4xl": {
        "$value": "2.8125rem",
        "$type": "dimension",
        "$description": "45px — page section headings (H2)"
      },
      "5xl": {
        "$value": "3.125rem",
        "$type": "dimension",
        "$description": "50px — hero/CTA headings"
      },
      "display": {
        "$value": "4.375rem",
        "$type": "dimension",
        "$description": "70px — hero display text"
      }
    },
    "fontWeight": {
      "extralight": {
        "$value": "200",
        "$type": "fontWeight",
        "$description": "Poppins ExtraLight — airy labels"
      },
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Georgia Regular / Open Sans Regular — body and headings"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Poppins SemiBold — feature callouts"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold — emphasis and CTA text"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.0",
        "$type": "number",
        "$description": "Display/hero headline leading"
      },
      "snug": {
        "$value": "1.2",
        "$type": "number",
        "$description": "Heading leading — Georgia headings"
      },
      "base": {
        "$value": "1.4",
        "$type": "number",
        "$description": "Wix global line-height — all font presets"
      },
      "relaxed": {
        "$value": "1.6",
        "$type": "number",
        "$description": "Body text comfortable reading"
      },
      "loose": {
        "$value": "1.8",
        "$type": "number",
        "$description": "Long-form content, ingredient descriptions"
      }
    },
    "letterSpacing": {
      "tight": {
        "$value": "0em",
        "$type": "dimension",
        "$description": "Default — no letter spacing"
      },
      "normal": {
        "$value": "0.65px",
        "$type": "dimension",
        "$description": "Body text — subtle spacing from site CSS"
      },
      "wide": {
        "$value": "0.9px",
        "$type": "dimension",
        "$description": "Labels and subheadings"
      },
      "wider": {
        "$value": "1.4px",
        "$type": "dimension",
        "$description": "Navigation and caps labels"
      }
    }
  },
  "spacing": {
    "0": {
      "$value": "0px",
      "$type": "dimension"
    },
    "1": {
      "$value": "4px",
      "$type": "dimension"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension"
    },
    "5": {
      "$value": "20px",
      "$type": "dimension"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension"
    },
    "10": {
      "$value": "40px",
      "$type": "dimension"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension"
    },
    "20": {
      "$value": "80px",
      "$type": "dimension"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension"
    },
    "32": {
      "$value": "128px",
      "$type": "dimension"
    },
    "40": {
      "$value": "160px",
      "$type": "dimension"
    }
  },
  "borderRadius": {
    "none": {
      "$value": "0px",
      "$type": "dimension"
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Small radius — form inputs"
    },
    "md": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Medium radius — cards (from site CSS)"
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Large radius — feature cards"
    },
    "xl": {
      "$value": "30px",
      "$type": "dimension",
      "$description": "Extra-large — image containers"
    },
    "2xl": {
      "$value": "50px",
      "$type": "dimension",
      "$description": "Very rounded — decorative elements"
    },
    "full": {
      "$value": "100px",
      "$type": "dimension",
      "$description": "Pill shape — CTA buttons (from site CSS)"
    }
  },
  "shadow": {
    "subtle": {
      "$value": "0 1px 3px rgba(0,0,0,0.08)",
      "$type": "shadow",
      "$description": "Subtle card shadow"
    },
    "default": {
      "$value": "0 4px 12px rgba(0,0,0,0.1)",
      "$type": "shadow",
      "$description": "Default elevation"
    },
    "elevated": {
      "$value": "0 8px 24px rgba(0,0,0,0.12)",
      "$type": "shadow",
      "$description": "Elevated card shadow"
    },
    "white": {
      "$value": "0 0 0 0 #FFFFFF",
      "$type": "shadow",
      "$description": "White shadow — from site CSS (decorative)"
    },
    "glowBlue": {
      "$value": "0 0 24px rgba(0,138,252,0.3)",
      "$type": "shadow",
      "$description": "Blue glow for CTA hover states"
    },
    "glowSky": {
      "$value": "0 0 20px rgba(15,162,219,0.25)",
      "$type": "shadow",
      "$description": "Sky blue glow for secondary actions"
    },
    "glowMint": {
      "$value": "0 0 16px rgba(182,243,232,0.4)",
      "$type": "shadow",
      "$description": "Mint glow for herbal/natural elements"
    },
    "card": {
      "$value": "0 0 14px rgba(0,0,0,0.2)",
      "$type": "shadow",
      "$description": "Card/ingredient shadow - from live ingredients page computed styles"
    }
  },
  "transition": {
    "fast": {
      "$value": "150ms ease-out",
      "$type": "string",
      "$description": "Fast micro-interactions"
    },
    "default": {
      "$value": "300ms ease-in-out",
      "$type": "string",
      "$description": "Standard transitions"
    },
    "slow": {
      "$value": "500ms ease-in-out",
      "$type": "string",
      "$description": "Slideshow/testimonial transitions"
    },
    "pageTransition": {
      "$value": "600ms cubic-bezier(0.83, 0, 0.17, 1)",
      "$type": "string",
      "$description": "Wix page transition timing — from site view-transition CSS"
    }
  },
  "breakpoint": {
    "mobile": {
      "$value": "480px",
      "$type": "dimension"
    },
    "mobileLandscape": {
      "$value": "640px",
      "$type": "dimension"
    },
    "tablet": {
      "$value": "768px",
      "$type": "dimension"
    },
    "desktop": {
      "$value": "1024px",
      "$type": "dimension"
    },
    "wide": {
      "$value": "1280px",
      "$type": "dimension"
    }
  },
  "effect": {
    "sectionFade": {
      "$value": "linear-gradient(180deg, rgba(240,251,255,1) 0%, rgba(255,255,255,0) 100%)",
      "$type": "string",
      "$description": "Soft blue-to-transparent section divider — current site pattern"
    },
    "heroBannerOverlay": {
      "$value": "linear-gradient(100deg, rgba(226,175,167,0) 0%, rgba(0,84,154,1) 100%)",
      "$type": "string",
      "$description": "Hero banner gradient overlay — warm transparency to navy"
    }
  },
  "logo": {
    "primary": {
      "$value": "726141_d270031e622a4d8ba6953aa0d8819626~mv2.png",
      "$type": "string",
      "$description": "Primary horizontal logo — header nav bar (197x66px on Wix CDN)"
    },
    "stacked": {
      "$value": "726141_73b5cf7ac7cd4e04a00f637733a7047d~mv2.png",
      "$type": "string",
      "$description": "Stacked logo mark — large brand emblem (345x401px on Wix CDN)"
    },
    "footer": {
      "$value": "726141_97f2d4084d4a42f6b8eca89511b9114c~mv2.png",
      "$type": "string",
      "$description": "Footer logo variant"
    },
    "wixCdnBase": {
      "$value": "https://static.wixstatic.com/media/",
      "$type": "string",
      "$description": "Base URL for Wix-hosted assets"
    },
    "brandColors": {
      "emblemBlue": {
        "$value": "#0FA2DB",
        "$type": "color",
        "$description": "Logo emblem primary blue"
      },
      "emblemLeaf": {
        "$value": "#4CAF50",
        "$type": "color",
        "$description": "Leaf/botanical element in logo"
      }
    }
  }
}