{
  "$schema": "https://www.designtokens.org/tr/2025.10/format/",

  "color": {
    "$type": "color",
    "brand": {
      "coral": {
        "$value": "#FC4E4D",
        "$description": "Main brand coral. PMS 1787 C, CMYK 0,69,69,1, RGB 252,78,77. Use for: logo, accents, CTAs, hover states, decorative underlines. Never as a large background fill on its own."
      },
      "coral-bright": {
        "$value": "#FF6B6A",
        "$description": "Coral hover state. Use only for :hover and :focus transitions — never as a default fill."
      },
      "cream": {
        "$value": "#FAF8F4",
        "$description": "Off-white background. PMS 663 C, CMYK 0,1,2,2, RGB 250,248,244. Always use as the default page canvas — never substitute #ffffff."
      },
      "obsidian": {
        "$value": "#1A1C1B",
        "$description": "Obsidian Black. CMYK 7,0,4,89, RGB 26,28,27. Primary text colour and premium dark surfaces (footer, banner, masthead). Brand black — never use #000000."
      }
    },

    "background": {
      "light": {
        "default": {
          "$value": "{color.brand.cream}",
          "$description": "Light mode page background. Must be cream — never pure white."
        },
        "paper": {
          "$value": "#ffffff",
          "$description": "Light mode card and surface background."
        }
      },
      "dark": {
        "$extends": "{color.background.light}",
        "default": {
          "$value": "#121212",
          "$description": "Dark mode page background."
        },
        "paper": {
          "$value": "#1e1e1e",
          "$description": "Dark mode card and surface background."
        }
      }
    },

    "text": {
      "light": {
        "primary": {
          "$value": "{color.brand.obsidian}",
          "$description": "Light mode primary text."
        },
        "secondary": {
          "$value": "#525252",
          "$description": "Light mode secondary / muted text."
        }
      },
      "dark": {
        "$extends": "{color.text.light}",
        "primary": {
          "$value": "#ffffff",
          "$description": "Dark mode primary text."
        },
        "secondary": {
          "$value": "#c8c4bc",
          "$description": "Dark mode secondary / muted text. Warm off-white — not a neutral grey."
        }
      }
    },

    "divider": {
      "light": {
        "subtle": {
          "$value": "rgba(26, 28, 27, 0.08)",
          "$description": "Light mode hairline border for cards and papers."
        },
        "strong": {
          "$value": "rgba(26, 28, 27, 0.16)",
          "$description": "Light mode divider line between sections."
        }
      },
      "dark": {
        "$extends": "{color.divider.light}",
        "subtle": {
          "$value": "rgba(250, 248, 244, 0.10)",
          "$description": "Dark mode hairline border for cards and papers."
        },
        "strong": {
          "$value": "rgba(250, 248, 244, 0.20)",
          "$description": "Dark mode divider line between sections."
        }
      }
    },

    "common": {
      "black": {
        "$value": "{color.brand.obsidian}",
        "$description": "Brand black — obsidian #1A1C1B, never #000000."
      },
      "white": {
        "$value": "#ffffff"
      }
    }
  },

  "typography": {
    "font-family": {
      "$type": "fontFamily",
      "primary": {
        "$value": "var(--font-montserrat), sans-serif",
        "$description": "Montserrat — the sole typeface for all web body text, UI labels, and headings. Loaded via next/font/google as --font-montserrat CSS variable."
      },
      "display": {
        "$value": "var(--font-rubik), sans-serif",
        "$description": "Rubik Bold — used exclusively for banners, hero display text, and video text overlays. Never for body paragraphs or UI labels. Loaded via next/font/google as --font-rubik CSS variable."
      }
    },

    "font-weight": {
      "$type": "fontWeight",
      "regular": { "$value": 400 },
      "medium":  { "$value": 500 },
      "semibold": { "$value": 600 },
      "bold":    { "$value": 700 }
    },

    "font-size": {
      "$type": "dimension",
      "base":    { "$value": "14px",      "$description": "1rem = 14px. All rem values are relative to this root size." },
      "h1":      { "$value": "3rem",      "$description": "42px" },
      "h2":      { "$value": "2.5rem",    "$description": "35px" },
      "h3":      { "$value": "2rem",      "$description": "28px" },
      "h4":      { "$value": "1.75rem",   "$description": "24.5px" },
      "h5":      { "$value": "1.5rem",    "$description": "21px" },
      "h6":      { "$value": "1.25rem",   "$description": "17.5px" },
      "body1":   { "$value": "1rem",      "$description": "14px" },
      "body2":   { "$value": "0.875rem",  "$description": "12.25px" },
      "button":  { "$value": "0.875rem",  "$description": "12.25px" },
      "caption": { "$value": "0.75rem",   "$description": "10.5px" },
      "overline":{ "$value": "0.75rem",   "$description": "10.5px" },
      "eyebrow": { "$value": "0.6875rem", "$description": "9.625px — used for .eyebrow utility class kickers and labels." },
      "banner-lg": { "$value": "52px",    "$description": "Upper bound for Rubik Bold display text in banners/video." },
      "banner-sm": { "$value": "42px",    "$description": "Lower bound for Rubik Bold display text in banners/video. Matches h1 size." }
    },

    "line-height": {
      "$type": "number",
      "tight":       { "$value": 1.2,  "$description": "h1" },
      "snug":        { "$value": 1.3,  "$description": "h2, h3" },
      "comfortable": { "$value": 1.4,  "$description": "h4, h5, overline" },
      "base":        { "$value": 1.5,  "$description": "h6" },
      "relaxed":     { "$value": 1.6,  "$description": "body1, body2, button, caption, subtitle1, subtitle2" }
    },

    "letter-spacing": {
      "$type": "dimension",
      "tight":          { "$value": "-0.02em", "$description": "Rubik Bold display numerals — .section-numeral class." },
      "none":           { "$value": "0em" },
      "body":           { "$value": "0.01em",  "$description": "body1, body2, button, subtitle1, subtitle2, caption." },
      "chip":           { "$value": "0.02em",  "$description": "Chip labels." },
      "heading":        { "$value": "0.05em",  "$description": "h3–h6 base letter-spacing." },
      "heading-display":{ "$value": "0.04em",  "$description": "h1 and h2 — applied via MuiTypography styleOverrides, overrides the heading base." },
      "overline":       { "$value": "0.16em",  "$description": "MUI overline variant — applied via MuiTypography styleOverrides." },
      "eyebrow":        { "$value": "0.24em",  "$description": ".eyebrow utility class." }
    },

    "style": {
      "$type": "typography",
      "h1": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.h1}",
          "fontWeight": "{typography.font-weight.bold}",
          "lineHeight": "{typography.line-height.tight}",
          "letterSpacing": "{typography.letter-spacing.heading-display}"
        },
        "$description": "Uppercase. Has automatic coral underline via ::after pseudo-element in MuiTypography styleOverrides.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "h2": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.h2}",
          "fontWeight": "{typography.font-weight.bold}",
          "lineHeight": "{typography.line-height.snug}",
          "letterSpacing": "{typography.letter-spacing.heading-display}"
        },
        "$description": "Uppercase. Has automatic 3px coral underline via ::after pseudo-element (see effect.h2-underline). When used inside a Stack, apply 32px bottom margin to clear the underline.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "h3": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.h3}",
          "fontWeight": "{typography.font-weight.semibold}",
          "lineHeight": "{typography.line-height.snug}",
          "letterSpacing": "{typography.letter-spacing.heading}"
        },
        "$description": "Uppercase.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "h4": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.h4}",
          "fontWeight": "{typography.font-weight.semibold}",
          "lineHeight": "{typography.line-height.comfortable}",
          "letterSpacing": "{typography.letter-spacing.heading}"
        },
        "$description": "Uppercase.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "h5": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.h5}",
          "fontWeight": "{typography.font-weight.semibold}",
          "lineHeight": "{typography.line-height.comfortable}",
          "letterSpacing": "{typography.letter-spacing.heading}"
        },
        "$description": "Uppercase.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "h6": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.h6}",
          "fontWeight": "{typography.font-weight.semibold}",
          "lineHeight": "{typography.line-height.base}",
          "letterSpacing": "{typography.letter-spacing.heading}"
        },
        "$description": "Uppercase.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "body1": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.body1}",
          "fontWeight": "{typography.font-weight.regular}",
          "lineHeight": "{typography.line-height.relaxed}",
          "letterSpacing": "{typography.letter-spacing.body}"
        }
      },
      "body2": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.body2}",
          "fontWeight": "{typography.font-weight.regular}",
          "lineHeight": "{typography.line-height.relaxed}",
          "letterSpacing": "{typography.letter-spacing.body}"
        }
      },
      "button": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.button}",
          "fontWeight": "{typography.font-weight.medium}",
          "lineHeight": "{typography.line-height.relaxed}",
          "letterSpacing": "{typography.letter-spacing.body}"
        },
        "$description": "textTransform: none — overrides MUI default uppercase for buttons.",
        "$extensions": { "textTransform": "none" }
      },
      "caption": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.caption}",
          "fontWeight": "{typography.font-weight.regular}",
          "lineHeight": "{typography.line-height.relaxed}",
          "letterSpacing": "{typography.letter-spacing.body}"
        }
      },
      "overline": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.overline}",
          "fontWeight": "{typography.font-weight.medium}",
          "lineHeight": "{typography.line-height.comfortable}",
          "letterSpacing": "{typography.letter-spacing.overline}"
        },
        "$description": "Uppercase. For labels and overline text above headings.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "eyebrow": {
        "$value": {
          "fontFamily": "{typography.font-family.primary}",
          "fontSize": "{typography.font-size.eyebrow}",
          "fontWeight": "{typography.font-weight.medium}",
          "lineHeight": 1,
          "letterSpacing": "{typography.letter-spacing.eyebrow}"
        },
        "$description": "Uppercase. Small-caps kicker labels above headings. Apply via .eyebrow CSS utility class.",
        "$extensions": { "textTransform": "uppercase" }
      },
      "banner": {
        "$value": {
          "fontFamily": "{typography.font-family.display}",
          "fontSize": "48px",
          "fontWeight": "{typography.font-weight.bold}",
          "lineHeight": 1.1,
          "letterSpacing": "-0.015em"
        },
        "$description": "Rubik Bold 700. Midpoint of the 42–52px banner range. For print/hero/video overlays only — never in the web UI. Scale between banner-sm (42px) and banner-lg (52px) based on context."
      }
    }
  },

  "spacing": {
    "$type": "dimension",
    "base":                       { "$value": "8px",    "$description": "Base spacing unit. All layout spacing is multiples of this." },
    "container-max-width":        { "$value": "1200px", "$description": "MUI Container maxWidthLg override. Page content never exceeds this width." },
    "container-padding-mobile":   { "$value": "16px",   "$description": "Horizontal container padding at xs (< 600px) viewports." },
    "container-padding-desktop":  { "$value": "24px",   "$description": "Horizontal container padding at md+ (≥ 900px) viewports." },
    "section-margin-mobile":      { "$value": "80px",   "$description": "Bottom margin of each page section at xs viewports." },
    "section-margin-desktop":     { "$value": "128px",  "$description": "Bottom margin of each page section at md+ viewports." },
    "h2-margin-bottom-in-stack":  { "$value": "32px",   "$description": "Extra bottom margin for <h2> inside MUI Stack, to clear the coral ::after underline pseudo-element." }
  },

  "border": {
    "radius": {
      "$type": "dimension",
      "default": {
        "$value": "4px",
        "$description": "Global border radius applied to all components: cards, papers, chips, buttons."
      }
    },
    "width": {
      "$type": "dimension",
      "hairline":  { "$value": "1px", "$description": "Used for card and paper borders, and dividers." },
      "underline": { "$value": "3px", "$description": "H2 coral decorative underline thickness." }
    }
  },

  "effect": {
    "h2-underline": {
      "$description": "Automatic coral decorative underline rendered via ::after pseudo-element on every <h2>. Implemented in MuiTypography styleOverrides.",
      "width-mobile":  { "$type": "dimension", "$value": "128px",  "$description": "Underline width at viewports < 900px." },
      "width-desktop": { "$type": "dimension", "$value": "160px",  "$description": "Underline width at viewports ≥ 900px." },
      "height":        { "$type": "dimension", "$value": "3px",    "$description": "Underline thickness." },
      "color":         { "$type": "color",     "$value": "{color.brand.coral}", "$description": "Always brand coral." },
      "bottom-offset": { "$type": "dimension", "$value": "-10px",  "$description": "CSS bottom property on the ::after element." }
    },

    "premium-grain": {
      "$description": "Fine paper-grain texture for obsidian dark surfaces (masthead, footer). SVG fractalNoise overlay; children must be z-index: 1. Apply via .premium-grain CSS class.",
      "opacity":    { "$type": "number", "$value": 0.06, "$description": "CSS opacity on the ::after overlay element." },
      "blend-mode": {                    "$value": "overlay", "$description": "CSS mix-blend-mode on the ::after overlay element." }
    },

    "coral-glow": {
      "$description": "Ambient coral radial gradient behind the masthead wordmark. Applied via .coral-glow CSS class, masthead only. Children must be z-index: 1.",
      "primary-opacity":   { "$type": "number",    "$value": 0.22, "$description": "Opacity of primary radial gradient at 20% 30%." },
      "secondary-opacity": { "$type": "number",    "$value": 0.10, "$description": "Opacity of secondary radial gradient at 85% 75%." },
      "blur":              { "$type": "dimension",  "$value": "2px", "$description": "CSS filter: blur() on the ::before element." }
    }
  },

  "motion": {
    "duration": {
      "$type": "duration",
      "fast": { "$value": "150ms", "$description": "For transform transitions (e.g., button active scale)." },
      "base": { "$value": "300ms", "$description": "For color, background-color, and border-color transitions." }
    },

    "easing": {
      "default": {
        "$type": "cubicBezier",
        "$value": [0.25, 0.1, 0.25, 1.0],
        "$description": "CSS 'ease' equivalent. Applied to all brand transitions."
      }
    },

    "transition": {
      "color": {
        "$type": "transition",
        "$value": {
          "duration": "300ms",
          "delay": "0ms",
          "timingFunction": [0.25, 0.1, 0.25, 1.0]
        },
        "$description": "Applied to: color, background-color, border-color. CSS: 'background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease'."
      },
      "transform": {
        "$type": "transition",
        "$value": {
          "duration": "150ms",
          "delay": "0ms",
          "timingFunction": [0.25, 0.1, 0.25, 1.0]
        },
        "$description": "Applied to: transform. CSS: 'transform 0.15s ease'. Used for button active scale(0.96)."
      }
    }
  }
}