@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/barlow-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/barlow-semi-condensed-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/barlow-semi-condensed-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-semi-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Light theme — default */
  --bg              : #FFFFFF;
  --bg-card         : #F2F2F0;
  --ink             : #090A0A;
  --ink-secondary   : #222321;
  --ink-tertiary    : #74766F;
  --link            : #0066CC;

  /* Dark theme — used when [data-theme="dark"] applied to a section */
  --bg-dark         : #070808;
  --ink-on-dark     : #F4F4EF;
  --ink-on-dark-sec : #A7A8A2;

  /* Accents */
  --accent-data     : #0A84FF;
  --accent-rooy     : #1FA67A;

  /* ROOY brand gradient — teal-blue → close-green. Used by the symbol,
     halos, and accents on dark scenes. */
  --rooy-teal       : #14B8B0;
  --rooy-green      : #1FA67A;
  --rooy-bright     : #4FE8B8;
  --rooy-deep       : #0E5C58;

  /* Type scale */
  --type-hero       : clamp(62px, 8.2vw, 138px);
  --type-section    : clamp(50px, 6.2vw, 116px);
  --type-eyebrow    : 13px;
  --type-lead       : clamp(18px, 1.35vw, 24px);
  --type-section-copy : clamp(22px, 1.85vw, 30px);
  --type-feature-title: clamp(24px, 1.85vw, 34px);
  --type-feature-copy : clamp(17px, 1.2vw, 21px);
  --type-body       : 16px;
  --type-small      : 13px;

  /* Transactional text roles shared by preorder and account surfaces. */
  --preorder-type-caption: .75rem;
  --preorder-type-label: .875rem;
  --preorder-type-copy: .875rem;
  --preorder-type-body: 1rem;
  --preorder-type-section: 1rem;
  --preorder-type-heading: 1.5rem;
  --preorder-leading-label: 1.5;
  --preorder-leading-copy: 1.65;
  --preorder-leading-reading: 1.8;
  --preorder-leading-heading: 1.35;

  /* Tracking is gentler for CJK — Latin defaults stay slightly tighter via inline overrides where needed */
  --tracking-hero   : -0.035em;
  --tracking-tight  : -0.025em;
  --tracking-eye    : 0.08em;

  --weight-regular  : 400;
  --weight-medium   : 500;
  --weight-semibold : 600;
  --weight-bold     : 700;
  --weight-heavy    : 800;
  --weight-black    : 900;
  --weight-display  : 500;

  /* Spacing */
  --space-1  :  4px;
  --space-2  :  8px;
  --space-3  : 12px;
  --space-4  : 16px;
  --space-5  : 24px;
  --space-6  : 32px;
  --space-7  : 48px;
  --space-8  : 64px;
  --space-9  : 80px;
  --space-10 : 104px;

  /* Layout */
  --content-max    : 1680px;
  --content-max-narrow: 1120px;
  --gutter         : clamp(28px, 8.6vw, 176px);
  --gutter-narrow  : clamp(24px, 5vw, 48px);
  --page-content-max: var(--content-max);
  --page-gutter    : var(--gutter);
  --section-pad-y  : clamp(64px, 9vh, 124px);

  /* Radius */
  --radius-sm   :  8px;
  --radius-md   :  12px;
  --radius-lg   :  18px;
  --radius-pill : 9999px;

  /* Buttons: the preorder hero is the shared visual reference. */
  --button-height: 52px;
  --button-cta-width: 180px;
  --button-height-compact: 44px;
  --button-padding: 24px;
  --button-padding-compact: 16px;
  --button-gap: 12px;
  --button-font-size: 15px;
  --button-font-size-compact: 14px;
  --button-height-comfortable: 56px;
  --button-height-touch: 48px;
  --button-font-size-comfortable: 1rem;
  --button-font-size-touch: .9375rem;
  --button-padding-touch: 12px;
  --button-weight: var(--weight-semibold);
  --button-radius: var(--radius-pill);
  --button-duration: 150ms;
  --button-primary-bg: oklch(.80 .13 164);
  --button-primary-hover: oklch(.72 .13 164);
  --button-primary-active: oklch(.68 .12 164);
  --button-primary-ink: oklch(.16 .006 165);
  --button-secondary-bg: oklch(.99 .003 165);
  --button-secondary-ink: oklch(.25 .012 165);
  --button-secondary-border: oklch(.79 .01 165);
  --button-secondary-hover: oklch(.95 .008 165);
  --button-secondary-active: oklch(.91 .012 165);
  --button-text-ink: oklch(.40 .085 165);
  --button-text-quiet-ink: oklch(.48 .012 175);
  --button-danger-bg: oklch(.49 .16 28);
  --button-danger-hover: oklch(.44 .15 28);
  --button-danger-active: oklch(.40 .14 28);
  --button-danger-ink: oklch(.99 .003 165);
  --button-disabled-bg: oklch(.94 .005 165);
  --button-disabled-ink: oklch(.49 .012 165);
  --button-focus: oklch(.43 .085 165);

  /* Motion */
  --ease          : cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint — default */
  --ease-out-expo : cubic-bezier(0.16, 1, 0.3, 1);    /* decisive arrival — use when a value snaps onto target */
  --dur-fast      : 200ms;
  --dur-base      : 400ms;
  --dur-slow      : 700ms;

  /* Type stacks */
  --font-latin-ui: "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Text",
          system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-latin-display: "Barlow Semi Condensed", "Barlow", -apple-system,
          BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-system-text: -apple-system, BlinkMacSystemFont, "SF Pro Text",
          "Segoe UI", system-ui, sans-serif;
  --font-cjk: "PingFang SC", "Noto Sans SC", -apple-system,
          BlinkMacSystemFont, "SF Pro Text", system-ui, "Barlow",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-ui: "Barlow", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "SF Pro Text", system-ui, "PingFang SC", "Noto Sans SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-body: var(--font-cjk);
  --font-display: var(--font-cjk);
  /* Cross-platform mono. Without the Windows entries (Cascadia / Consolas)
     the stack falls through to the generic `monospace` keyword, which on
     Windows resolves to Courier New — heavy slab serifs that mangle the
     big HUD numbers. Cascadia Mono ships with Windows 11, Consolas
     ships with Vista+, so coverage is broad. */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               Menlo, Consolas, "Liberation Mono", monospace;
}

html[data-lang="en"] {
  --font-body: var(--font-system-text);
  --font-display: var(--font-latin-display);
}