/* 888 Trading design tokens (v2.1, 2026-10-27): one place for colours, type, spacing and breakpoints, shared by every page
   (home, /electrical/, /privacy/, 404). Colours follow the official Brand Kit (07_WEBSITE_AND_SIGNATURE/888_Trading_Brand_Tokens.css):
   ink #1D1D1B, champagne gold #A58C5D, ivory #F6F3EC. Type follows patek.com (owner, 27 Oct 2026): Open Sans for headings, menus and
   buttons, Lora for reading text; Thai uses Noto Sans Thai and Noto Serif Thai. Tenor Sans stays only inside the logo artwork.
   Fonts are self-hosted (OFL licences next to the files in /assets/fonts/).
   Breakpoints: mobile < 768px, tablet 768-1199px, desktop >= 1200px. Full description: docs/DESIGN_SYSTEM.md */

/* ---------- Fonts ---------- */
/* Open Sans: English headings (300), navigation, buttons, labels and form fields (400); 600 for the odd emphasis */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/open-sans-latin-300-normal.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:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-latin-400-normal.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:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-latin-600-normal.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}
/* Lora: English reading text */
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/lora-latin-400-normal.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:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/lora-latin-400-italic.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:"Lora";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/lora-latin-700-normal.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}
/* Noto Sans Thai: Thai headings (300), navigation and buttons (400). Thai glyphs only; Latin in the same line uses Open Sans */
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/noto-sans-thai-thai-300-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/noto-sans-thai-thai-400-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
/* Noto Serif Thai: Thai reading text. Thai glyphs only; Latin in the same line uses Lora */
@font-face{font-family:"Noto Serif Thai";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/noto-serif-thai-thai-400-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Serif Thai";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/noto-serif-thai-thai-600-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

:root{
  /* ---------- Colour ---------- */
  --c-ink:#1D1D1B;          /* brand ink: body text, headings, dark buttons */
  --c-ink-soft:#55534E;     /* secondary text on light backgrounds (7.4:1 on white) */
  --c-gold:#A58C5D;         /* brand champagne gold: rules, large text, links and accents on dark */
  --c-gold-deep:#7A6434;    /* gold for small text and links on light backgrounds (5.6:1 on white); hover of --c-gold */
  --c-white:#FFFFFF;
  --c-ivory:#F6F3EC;        /* brand ivory: alternate section background */
  --c-warm:#F8F7F7;         /* warm grey: alternate section background */
  --c-line:#C4BDB4;         /* sand: hairlines and borders */
  --c-line-soft:#E6E1D8;    /* faint dividers */
  --c-charcoal:#1D1B1A;     /* dark sections and footer */
  --c-charcoal-2:#262321;   /* raised panel on charcoal */
  --c-on-dark:#F6F3EC;      /* text on charcoal */
  --c-on-dark-soft:#B9B3A8; /* secondary text on charcoal (8.5:1) */
  --c-line-dark:rgba(246,243,236,.16); /* hairlines on charcoal */
  --c-scrim:rgba(17,16,15,.45); /* darkens photos under white text */

  /* ---------- Type families ---------- */
  --f-display:"Open Sans","Noto Sans Thai","Helvetica Neue",Arial,sans-serif;  /* headings, nav, buttons, labels, form fields */
  --f-body:"Lora","Noto Serif Thai",Georgia,"Times New Roman",serif;          /* reading text */
  --f-ui:var(--f-display);                                                    /* kept as an alias for form fields and numbers */

  /* ---------- Type scale: mobile first (< 768px); tablet and desktop values below ----------
     Desktop values are patek.com's: hero 40/48, section title 32/38.4, "Discover more" 14/26, body 16/26. */
  --fs-display:28px; --lh-display:34px;   /* hero h1 (uppercase, light) */
  --fs-h1:26px;      --lh-h1:32px;        /* page title on text pages */
  --fs-h2:24px;      --lh-h2:30px;        /* section title (uppercase, light) */
  --fs-h3:19px;      --lh-h3:26px;
  --fs-h4:16px;      --lh-h4:24px;
  --fs-h5:14px;      --lh-h5:22px;
  --fs-h6:13px;      --lh-h6:20px;
  --fs-body:16px;    --lh-body:26px;
  --fs-lead:17px;    --lh-lead:28px;
  --fs-small:14px;   --lh-small:22px;
  --fs-eyebrow:12px; --ls-eyebrow:.16em;
  --fs-nav:13px;     --ls-nav:.1em;      /* header MENU, language, utility links */
  --fs-menu:22px;    --lh-menu:32px;     /* items in the full-screen menu */
  --fs-button:13px;  --ls-button:.1em;   /* pill buttons */
  --fs-more:13px;    --lh-more:24px; --ls-more:.02em; /* "Discover more" links */
  --ls-display:.003em;                   /* hero h1 */
  --ls-heading:.034em;                   /* section titles and other uppercase English headings */
  --ls-heading-th:0;                     /* Thai headings: normal case, no extra spacing */

  /* ---------- Space (8px rhythm) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:64px;        /* vertical padding of a section */
  --gutter:20px;           /* side padding of the page */
  --container:1320px;      /* widest content */
  --measure:720px;         /* widest text column */
  --header-h:64px;

  /* ---------- Shape and motion ---------- */
  --radius:0;              /* everything is square ... */
  --radius-pill:999px;     /* ... except buttons */
  --shadow-modal:0 30px 80px -30px rgba(0,0,0,.35);
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.2s; --t:.45s; --t-slow:.9s;
}

/* Tablet 768-1199px */
@media (min-width:768px){
  :root{
    --fs-display:34px; --lh-display:41px;
    --fs-h1:30px; --lh-h1:37px;
    --fs-h2:28px; --lh-h2:34px;
    --fs-h3:20px; --lh-h3:28px;
    --fs-h4:17px; --lh-h4:25px;
    --fs-lead:18px; --lh-lead:30px;
    --fs-eyebrow:12px;
    --fs-menu:26px; --lh-menu:36px;
    --section-y:96px; --gutter:32px; --header-h:72px;
  }
}
/* Desktop >= 1200px */
@media (min-width:1200px){
  :root{
    --fs-display:40px; --lh-display:48px;
    --fs-h1:34px; --lh-h1:42px;
    --fs-h2:32px; --lh-h2:38.4px;
    --fs-h3:22px; --lh-h3:30px;
    --fs-h4:17px; --lh-h4:26px;
    --fs-body:16px; --lh-body:26px;
    --fs-lead:18px; --lh-lead:30px;
    --fs-button:13px; --fs-more:14px; --lh-more:26px;
    --fs-menu:30px; --lh-menu:42px;
    --section-y:128px; --gutter:48px; --header-h:84px;
  }
}
/* Large desktop and TV, >= 1800px and >= 2400px (v2.3.1): the page grows with the screen instead of staying a 1320px
   column in the middle of a 2560px or 3840px display. Wider container, wider gutters and a slightly larger type scale. */
@media (min-width:1800px){
  :root{
    --fs-display:46px; --lh-display:56px;
    --fs-h1:38px; --lh-h1:47px;
    --fs-h2:36px; --lh-h2:43px;
    --fs-h3:24px; --lh-h3:33px;
    --fs-h4:18px; --lh-h4:27px;
    --fs-body:17px; --lh-body:28px;
    --fs-lead:20px; --lh-lead:33px;
    --fs-small:15px; --lh-small:24px;
    --fs-eyebrow:13px; --fs-nav:14px; --fs-button:14px; --fs-more:15px; --lh-more:27px;
    --fs-menu:34px; --lh-menu:46px;
    --section-y:144px; --gutter:64px; --header-h:92px; --container:1520px; --measure:800px;
  }
}
@media (min-width:2400px){
  :root{
    --fs-display:54px; --lh-display:64px;
    --fs-h1:42px; --lh-h1:52px;
    --fs-h2:40px; --lh-h2:48px;
    --fs-h3:26px; --lh-h3:35px;
    --fs-h4:19px; --lh-h4:28px;
    --fs-body:18px; --lh-body:30px;
    --fs-lead:22px; --lh-lead:36px;
    --fs-small:16px; --lh-small:26px;
    --fs-more:16px; --lh-more:28px;
    --fs-menu:38px; --lh-menu:50px;
    --section-y:168px; --gutter:80px; --header-h:100px; --container:1760px; --measure:880px;
  }
}
/* Thai needs taller lines for vowels and tone marks above and below */
:root:lang(th){ --lh-body:29px; --lh-lead:31px; --lh-display:1.36; --lh-h2:1.4; }
@media (min-width:1200px){ :root:lang(th){ --lh-body:29px; --lh-lead:32px; } }
@media (min-width:1800px){ :root:lang(th){ --lh-body:31px; --lh-lead:35px; } }
@media (min-width:2400px){ :root:lang(th){ --lh-body:33px; --lh-lead:38px; } }