/* ==========================================================================
   TRS GOLF — design tokens
   Colour, typography, spacing, radii, shadows, motion.
   Import this file into any artifact that should look like TRS.
   ========================================================================== */

/* -- Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: "Aeonik";
  src: url("./fonts/Aeonik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("./fonts/Aeonik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("./fonts/Aeonik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* SuisseIntl is the production body fallback (shipped in the Shopify theme). */
@font-face {
  font-family: "Suisse Intl";
  src: url("./assets/SuisseIntl-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./assets/SuisseIntl-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("./assets/SuisseIntl-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* -- Tokens ---------------------------------------------------------------- */
:root {
  /* Brand reds */
  --trs-red:           #cf2437;   /* canonical Figma red, stars, badges      */
  --trs-red-bright:    #fc364c;   /* Shopify theme button red                */
  --trs-red-dark:      #9c1827;   /* border under red CTA                    */
  --trs-red-tint:      #fff8f9;   /* selected pack background, soft alert    */

  /* Ink (text) */
  --trs-ink:           #161616;   /* body text, headlines                    */
  --trs-ink-2:         #222222;   /* alt body                                */
  --trs-ink-3:         #212121;
  --trs-ink-soft:      rgba(0,0,0,0.68);  /* underlined links                */

  /* Greys */
  --trs-grey-700:      #5f5f5f;   /* captions / secondary                    */
  --trs-grey-600:      #969696;   /* active borders                          */
  --trs-grey-500:      #c6c6c6;
  --trs-grey-400:      #d9d9d9;
  --trs-grey-300:      #e4e4e4;   /* default border                          */
  --trs-grey-200:      #e9e9e9;
  --trs-grey-100:      #f3f3f3;   /* scheme-2 surface                        */

  /* Surfaces */
  --trs-surface:       #ffffff;
  --trs-surface-2:     #f7f7f7;
  --trs-surface-3:     #f3f3f3;
  --trs-surface-dark:  #121212;   /* scheme-4 dark mode                      */

  /* Semantic */
  --trs-success:       #5cd33f;   /* in-stock dot                            */
  --trs-success-tint:  rgba(92,211,63,0.25);
  --trs-info:          #5794ee;
  --trs-blue:          #334fb4;   /* scheme-5 accent (rare)                  */

  /* Type — families */
  --trs-font-display:  "Aeonik", "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --trs-font-body:     "Aeonik", "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --trs-font-mono:     "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type — weights */
  --trs-fw-regular: 400;
  --trs-fw-medium:  500;
  --trs-fw-bold:    700;

  /* Type — sizes (mobile baseline; bump 1.25x for desktop H1/H2 if needed) */
  --trs-fs-display: 32px;   /* hero, never on mobile PDP                     */
  --trs-fs-h1:      28px;
  --trs-fs-h2:      24px;
  --trs-fs-h3:      20px;
  --trs-fs-h4:      18px;
  --trs-fs-body:    14px;
  --trs-fs-body-lg: 16px;
  --trs-fs-caption: 12px;
  --trs-fs-eyebrow: 11px;

  /* Type — line-height */
  --trs-lh-tight:   1.0;    /* display / CTAs                                */
  --trs-lh-snug:    1.15;
  --trs-lh-normal:  1.35;
  --trs-lh-loose:   1.55;   /* paragraphs                                    */

  /* Type — letter spacing */
  --trs-ls-tight:   -0.020em;   /* canonical for display + CTA               */
  --trs-ls-normal:   0;
  --trs-ls-wide:     0.04em;    /* uppercase eyebrows                        */

  /* Spacing scale (4px base) */
  --trs-sp-1:  4px;
  --trs-sp-2:  8px;
  --trs-sp-3:  12px;
  --trs-sp-4:  16px;
  --trs-sp-5:  20px;
  --trs-sp-6:  24px;
  --trs-sp-8:  32px;
  --trs-sp-10: 40px;
  --trs-sp-12: 50px;       /* canonical section padding                     */
  --trs-sp-16: 64px;

  /* Radii */
  --trs-radius-0:    0;       /* default — most surfaces                    */
  --trs-radius-sm:   2px;     /* primary CTA                                */
  --trs-radius-md:   8px;     /* pricing-pack cards                         */
  --trs-radius-lg:   16px;
  --trs-radius-pill: 9999px;  /* variant pills, badges (40px in source)     */

  /* Borders */
  --trs-border:        1px solid var(--trs-grey-300);
  --trs-border-strong: 1px solid var(--trs-grey-600);
  --trs-border-red:    2px solid var(--trs-red);

  /* Shadows — used sparingly */
  --trs-shadow-sm: 0 4px 5px rgba(18,18,18,0.05);
  --trs-shadow-md: 0 8px 24px rgba(18,18,18,0.08);

  /* Motion */
  --trs-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --trs-dur-fast:    160ms;
  --trs-dur-normal:  220ms;
  --trs-dur-slow:    400ms;

  /* Layout */
  --trs-page-width:    1340px;
  --trs-page-gutter:   16px;

  /* ===== Semantic role bindings ===== */
  --fg:        var(--trs-ink);
  --fg-2:      var(--trs-grey-700);
  --bg:        var(--trs-surface);
  --bg-2:      var(--trs-surface-2);
  --border:    var(--trs-grey-300);
  --accent:    var(--trs-red);
  --accent-fg: #ffffff;
}

/* -- Element defaults ------------------------------------------------------ */
body {
  font-family: var(--trs-font-body);
  font-weight: var(--trs-fw-regular);
  font-size:   var(--trs-fs-body);
  line-height: var(--trs-lh-normal);
  color:       var(--fg);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-medium);
  font-size:   var(--trs-fs-h1);
  line-height: var(--trs-lh-tight);
  letter-spacing: var(--trs-ls-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-medium);
  font-size:   var(--trs-fs-h2);
  line-height: var(--trs-lh-snug);
  letter-spacing: var(--trs-ls-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-medium);
  font-size:   var(--trs-fs-h3);
  line-height: var(--trs-lh-snug);
  letter-spacing: var(--trs-ls-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-medium);
  font-size:   var(--trs-fs-h4);
  line-height: var(--trs-lh-snug);
  margin: 0;
}
p {
  margin: 0;
  line-height: var(--trs-lh-loose);
}
.eyebrow {
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-bold);
  font-size:   var(--trs-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--trs-ls-wide);
  color: var(--trs-grey-700);
}
.caption {
  font-size: var(--trs-fs-caption);
  color: var(--trs-grey-700);
}
strong, b { font-weight: var(--trs-fw-bold); }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.85; }

/* -- Button system --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--trs-sp-2);
  height: 60px;
  padding: 0 24px;
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-bold);
  font-size: 16px;
  line-height: 1;
  letter-spacing: var(--trs-ls-tight);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--trs-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--trs-dur-fast) var(--trs-ease),
              transform var(--trs-dur-fast) var(--trs-ease);
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--trs-red);
  color: #fff;
  border-color: var(--trs-red-dark);
}
.btn-primary:hover { background: #b81f30; }

.btn-secondary {
  background: #fff;
  color: var(--trs-ink);
  border-color: var(--trs-ink);
}
.btn-secondary:hover { background: var(--trs-surface-3); }

.btn-dark {
  background: var(--trs-ink);
  color: #fff;
  border-color: var(--trs-ink);
}

/* -- Variant pill --------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--trs-radius-pill);
  border: 1px solid rgba(0,0,0,0.55);
  background: #fff;
  font-size: 14px;
  font-weight: var(--trs-fw-medium);
  cursor: pointer;
}
.pill[aria-checked="true"] {
  background: var(--trs-ink);
  color: #fff;
  border-color: var(--trs-ink);
}

/* -- Badge ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--trs-radius-pill);
  background: var(--trs-red);
  color: #fff;
  font-family: var(--trs-font-display);
  font-weight: var(--trs-fw-bold);
  font-size: 11px;
  letter-spacing: var(--trs-ls-wide);
  text-transform: uppercase;
}
.badge--dark { background: var(--trs-ink); }