/** Shopify CDN: Minification failed

Line 284:0 All "@import" rules must come first
Line 285:0 All "@import" rules must come first
Line 286:0 All "@import" rules must come first
Line 287:0 All "@import" rules must come first
Line 288:0 All "@import" rules must come first
Line 289:0 All "@import" rules must come first

**/
/* GENERATED by tools/ds-pipeline/build-tokens.mjs — do not edit. Re-run after DS re-export. */

/* --- tokens/fonts.css --- */
/* PHUTHAITECH — Webfonts
   SUBSTITUTION NOTE: the real PHUTHAITECH wordmark uses a bespoke angular
   "performance/motorsport" display face (supplied only as logo PNG/SVG, no
   font file). For headings we substitute Saira — a technical, squarish
   industrial sans with the closest tone. Body/UI uses Be Vietnam Pro, which
   has first-class Vietnamese glyph coverage (the storefront is VN/EN).
   Swap these @import lines for local @font-face rules if brand fonts arrive. */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600;1,700&family=Saira+Condensed:wght@600;700;800&family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Roboto+Mono:wght@400;500;600&display=swap');

/* --- tokens/colors.css --- */
/* PHUTHAITECH — Color tokens
   Brand red is the single hero color (site theme-color #ee4123).
   Neutrals are cool industrial "steel" greys. Semantics are restrained. */
:root {
  /* --- Brand red (primary) --- */
  --ptt-red-50:  #fdece8;
  --ptt-red-100: #fbd2c8;
  --ptt-red-200: #f8ab98;
  --ptt-red-300: #f57e63;
  --ptt-red-400: #f15c3d;
  --ptt-red-500: #ee4123; /* hero / brand */
  --ptt-red-600: #d5361b; /* hover */
  --ptt-red-700: #b02a14; /* active / pressed */
  --ptt-red-800: #8a2110;
  --ptt-red-900: #641708;

  /* --- Ink / near-black (logo black, headings) --- */
  --ptt-ink-900: #141414;
  --ptt-ink-800: #1e1e20;
  --ptt-ink-700: #2a2b2e;

  /* --- Steel neutrals --- */
  --ptt-steel-900: #23262b;
  --ptt-steel-800: #33383f;
  --ptt-steel-700: #4a515a;
  --ptt-steel-600: #656d78;
  --ptt-steel-500: #838b96;
  --ptt-steel-400: #a7aeb8;
  --ptt-steel-300: #c9cdd4;
  --ptt-steel-200: #e2e5e9;
  --ptt-steel-100: #eef0f2;
  --ptt-steel-50:  #f6f7f8;
  --ptt-white:     #ffffff;

  /* --- Semantic --- */
  --ptt-success: #2e8b57;
  --ptt-warning: #e6a100;
  --ptt-danger:  #d5361b;
  --ptt-info:    #2f6fb0;

  /* =========================================================
     Semantic aliases — reference these in product code
     ========================================================= */
  --brand:            var(--ptt-red-500);
  --brand-hover:      var(--ptt-red-600);
  --brand-active:     var(--ptt-red-700);
  --brand-tint:       var(--ptt-red-50);

  --text-strong:      var(--ptt-ink-900);
  --text-body:        var(--ptt-steel-800);
  --text-muted:       var(--ptt-steel-600);
  --text-faint:       var(--ptt-steel-500);
  --text-on-brand:    var(--ptt-white);
  --text-on-dark:     var(--ptt-white);

  --surface-page:     var(--ptt-steel-50);
  --surface-card:     var(--ptt-white);
  --surface-sunken:   var(--ptt-steel-100);
  --surface-dark:     var(--ptt-ink-900);
  --surface-brand:    var(--ptt-red-500);

  --border-subtle:    var(--ptt-steel-200);
  --border-default:   var(--ptt-steel-300);
  --border-strong:    var(--ptt-steel-400);

  --price-sale:       var(--ptt-red-500);
  --price-was:        var(--ptt-steel-500);
  --badge-sale-bg:    var(--ptt-red-500);
  --badge-sale-fg:    var(--ptt-white);

  --focus-ring:       var(--ptt-red-500);
}

/* --- tokens/typography.css --- */
/* PHUTHAITECH — Typography tokens */
:root {
  /* Families — all support Vietnamese natively; Be Vietnam Pro is the
     VN-complete fallback behind the display face for any missing glyph. */
  --font-display: 'Saira', 'Be Vietnam Pro', 'Arial Narrow', system-ui, sans-serif;      /* headings, hero, buttons */
  --font-display-condensed: 'Saira Condensed', 'Saira', 'Be Vietnam Pro', sans-serif;     /* section eyebrows, badges */
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;        /* body, UI, prices */
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', monospace;                          /* SKUs, specs, part numbers */

  /* Type scale (rem @16px base) */
  --fs-display-1: 4.5rem;   /* 72 — hero */
  --fs-display-2: 3.25rem;  /* 52 */
  --fs-h1: 2.5rem;          /* 40 */
  --fs-h2: 2rem;            /* 32 */
  --fs-h3: 1.5rem;          /* 24 */
  --fs-h4: 1.25rem;         /* 20 */
  --fs-lg: 1.125rem;        /* 18 */
  --fs-base: 1rem;          /* 16 */
  --fs-sm: 0.875rem;        /* 14 */
  --fs-xs: 0.75rem;         /* 12 */
  --fs-2xs: 0.6875rem;      /* 11 — eyebrow/label */

  /* Weights */
  --fw-light: 300;       /* @kind font */
  --fw-regular: 400;     /* @kind font */
  --fw-medium: 500;      /* @kind font */
  --fw-semibold: 600;    /* @kind font */
  --fw-bold: 700;        /* @kind font */
  --fw-extrabold: 800;   /* @kind font */

  /* Line heights */
  --lh-tight: 1.05;      /* @kind other */
  --lh-snug: 1.2;        /* @kind other */
  --lh-normal: 1.5;      /* @kind other */
  --lh-relaxed: 1.65;    /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em;   /* @kind other */
  --ls-normal: 0;        /* @kind other */
  --ls-wide: 0.04em;     /* @kind other */
  --ls-wider: 0.12em;    /* @kind other */

  /* Semantic type aliases */
  --heading-family: var(--font-display);
  --heading-weight: var(--fw-bold);
  --heading-tracking: var(--ls-tight);   /* @kind other */
  --eyebrow-family: var(--font-display-condensed);
  --eyebrow-tracking: var(--ls-wider);   /* @kind other */
  --body-family: var(--font-body);
}

/* --- tokens/spacing.css --- */
/* PHUTHAITECH — Spacing & layout tokens (4px base grid) */
:root {
  --sp-0: 0;         /* @kind spacing */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 0.75rem;   /* 12 */
  --sp-4: 1rem;      /* 16 */
  --sp-5: 1.25rem;   /* 20 */
  --sp-6: 1.5rem;    /* 24 */
  --sp-8: 2rem;      /* 32 */
  --sp-10: 2.5rem;   /* 40 */
  --sp-12: 3rem;     /* 48 */
  --sp-16: 4rem;     /* 64 */
  --sp-20: 5rem;     /* 80 */
  --sp-24: 6rem;     /* 96 */

  /* Layout */
  --container-max: 1320px;
  --container-pad: var(--sp-6);
  --section-gap: var(--sp-16);
  --grid-gutter: var(--sp-5);

  /* Component heights */
  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;
}

@media (max-width: 1279px) { :root { --container-pad: 20px; } }
@media (max-width: 1023px) { :root { --container-pad: 16px; } }
@media (max-width: 767px)  { :root { --container-pad: 12px; } }

/* --- tokens/effects.css --- */
/* PHUTHAITECH — Radii, shadows, borders, motion
   The brand mark is built from sharp angular cuts, so the system leans
   crisp: small radii, hairline steel borders, and a signature 45deg
   "clipped corner" motif for hero/CTA surfaces. */
:root {
  /* Radii — kept tight (industrial, not soft/consumer) */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;   /* default control / card radius */
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Signature clipped-corner (top-right notch, echoes the P mark) */
  --clip-notch: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);    /* @kind other */
  --clip-notch-lg: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); /* @kind other */

  /* Shadows — low, neutral-cool, never blurry-soft */
  --shadow-xs: 0 1px 2px rgba(20,20,20,0.06);
  --shadow-sm: 0 1px 3px rgba(20,20,20,0.08), 0 1px 2px rgba(20,20,20,0.06);
  --shadow-md: 0 4px 10px rgba(20,20,20,0.08), 0 2px 4px rgba(20,20,20,0.06);
  --shadow-lg: 0 12px 28px rgba(20,20,20,0.12), 0 4px 8px rgba(20,20,20,0.06);
  --shadow-brand: 0 6px 18px rgba(238,65,35,0.28);

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle);  /* @kind other */
  --border-1: 1px solid var(--border-default);         /* @kind other */
  --border-2: 2px solid var(--ptt-ink-900);            /* @kind other */
  --focus-shadow: 0 0 0 3px rgba(238,65,35,0.35);      /* @kind shadow */

  /* Motion — quick, mechanical; no bounce */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-med: 200ms;    /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
  --transition-control: color var(--dur-fast) var(--ease-standard),
                        background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard),
                        box-shadow var(--dur-fast) var(--ease-standard),
                        transform var(--dur-fast) var(--ease-standard); /* @kind other */
}

/* --- tokens/base.css --- */
/* PHUTHAITECH — base element defaults (opt-in resets kept light) */
:root {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin: 0;
  text-transform: uppercase;
}

/* Links */
a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
  color: var(--brand-hover);
}

/* Eyebrow / kicker utility */
.ptt-eyebrow {
  font-family: var(--eyebrow-family);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  color: var(--brand);
}

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
  border-radius: var(--radius-xs);
}

/* --- styles.css --- */
/* =====================================================================
   PHUTHAITECH DESIGN SYSTEM — global entry point
   Consumers link THIS file only. It is import-only by contract.
   ===================================================================== */
@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/effects.css');
@import url('./tokens/base.css');