/* ============================================================================
   theme.css — Transocean Group Limited (tog.com.hk)
   ----------------------------------------------------------------------------
   PRODUCTION / HANDOFF STYLESHEET.

   This file is the single source of truth for the site's visual language on the
   DEPLOYED static build. The authored .dc.html components render with inline
   styles (so they paint instantly as they stream); the exact values used there
   are mirrored here as design tokens + utility classes, so the production HTML
   can be styled from one place and re-themed in one edit.

   To re-theme the whole site: change a variable in :root below.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
  /* Brand palette — restrained, one warm accent */
  --tog-accent:        #C25E1C;   /* primary amber — CTAs, rules, eyebrows   */
  --tog-accent-bright: #E08A3C;   /* lighter amber — accents on dark         */
  --tog-ink:           #1B1815;   /* near-black text                          */
  --tog-ink-strong:    #241D16;   /* headings / logo                          */
  --tog-espresso:      #221C16;   /* dark section background                  */
  --tog-espresso-deep: #1B1611;   /* footer background                        */

  /* Neutrals / surfaces */
  --tog-bg:            #EDE7DB;   /* page (behind the sheet)                  */
  --tog-surface:       #F6F3EE;   /* main content sheet                       */
  --tog-surface-2:     #FBFAF7;   /* alt / zebra surface                      */
  --tog-tile:          #FBF7EF;   /* product image tiles                      */

  /* Text tints */
  --tog-text:          #4A443C;   /* body copy                                */
  --tog-text-soft:     #6B655C;   /* secondary copy                           */
  --tog-text-mute:     #8A837A;   /* mono labels / meta                       */
  --tog-on-dark:       #F0E7DC;   /* text on espresso                         */
  --tog-on-dark-soft:  #C8BEB1;   /* secondary text on espresso               */

  /* Lines & borders (the "stitched seam" motif) */
  --tog-line:          #DBD2C2;   /* dashed section seams                     */
  --tog-line-soft:     #ECE4D6;   /* faint dashed seams                       */
  --tog-line-solid:    #E7DFD1;   /* solid card border                        */
  --tog-line-dark:     #3A322A;   /* dashed seam on espresso                  */
  --tog-stitch: 2px dashed var(--tog-line);
  --tog-stitch-accent: 2px dashed var(--tog-accent);

  /* Typography */
  --tog-font-head:  'Bricolage Grotesque', system-ui, sans-serif;
  --tog-font-body:  'Hanken Grotesk', system-ui, sans-serif;
  --tog-font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  --tog-h1: 700 clamp(30px, 4vw, 41px)/1.1  var(--tog-font-head);
  --tog-h2: 700 27px/1.2  var(--tog-font-head);
  --tog-h3: 700 16px/1.3  var(--tog-font-head);
  --tog-eyebrow-size: 12px;
  --tog-eyebrow-tracking: 0.12em;

  /* Spacing / geometry */
  --tog-maxw:        1180px;
  --tog-pad-x:       44px;
  --tog-section-y:   52px;
  --tog-radius:      12px;
  --tog-radius-lg:   16px;
  --tog-radius-pill: 100px;

  /* Elevation */
  --tog-shadow-sheet: 0 0 80px rgba(0,0,0,0.08);
  --tog-shadow-btn:   0 6px 20px rgba(28,21,14,0.30);
}

/* ---------------------------------------------------------------------------
   2. Base / resets
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tog-bg);
  color: var(--tog-ink);
  font-family: var(--tog-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: var(--tog-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; color: var(--tog-ink-strong); letter-spacing: -0.02em; }
p { text-wrap: pretty; }

/* Hide scrollbars on horizontal product carousels */
.tog-scroller { scrollbar-width: none; -ms-overflow-style: none; }
.tog-scroller::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------------------- */
.tog-sheet {
  max-width: var(--tog-maxw);
  margin: 0 auto;
  background: var(--tog-surface);
  box-shadow: var(--tog-shadow-sheet);
}

.tog-section { padding: var(--tog-section-y) var(--tog-pad-x); }
.tog-seam-b  { border-bottom: var(--tog-stitch); }
.tog-seam-t  { border-top: var(--tog-stitch); }

/* Header / nav */
.tog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--tog-pad-x);
  border-bottom: var(--tog-stitch);
}
/* Brand lockup in the top bar */
.tog-brandrow   { display: flex; align-items: center; gap: 12px; }
.tog-brand      { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.tog-brandmark  { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.tog-brandglyph { margin: 0 -1px; }
.tog-brandletter{ font-family: var(--tog-font-head); font-weight: 800; font-size: 27px;
                  letter-spacing: -0.03em; color: var(--tog-ink-strong); }
.tog-brandname  { font-family: var(--tog-font-head); font-weight: 700; font-size: 17px;
                  letter-spacing: -0.01em; color: var(--tog-ink-strong); }
.tog-brandloc   { font-family: var(--tog-font-mono); font-size: 11px; letter-spacing: 0.14em;
                  color: var(--tog-text-mute); text-transform: uppercase; }

.tog-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; }
/* :not(.tog-btn) matters — .tog-nav a is (0,1,1) and would otherwise beat
   .tog-btn--dark (0,1,0), painting the quote button's text dark on a
   near-black background. */
.tog-nav a:not(.tog-btn) { color: var(--tog-text); }
.tog-nav a.is-active { color: var(--tog-accent); font-weight: 600; }

/* ---------------------------------------------------------------------------
   4. Typography helpers
   --------------------------------------------------------------------------- */
.tog-h1 { font: var(--tog-h1); letter-spacing: -0.02em; }
.tog-h2 { font: var(--tog-h2); letter-spacing: -0.01em; }
.tog-h3 { font: var(--tog-h3); }

.tog-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tog-font-mono);
  font-size: var(--tog-eyebrow-size);
  letter-spacing: var(--tog-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--tog-accent);
}
.tog-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tog-accent); display: inline-block;
}

.tog-mono {
  font-family: var(--tog-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tog-text-mute);
}

.tog-lede { font-size: 16px; line-height: 1.6; color: var(--tog-text); max-width: 74ch; }

/* Accent underline rule under a heading */
.tog-rule { height: 0; border-top: var(--tog-stitch-accent); width: 64px; margin: 0 0 18px; }

/* ---------------------------------------------------------------------------
   5. Components
   --------------------------------------------------------------------------- */
/* Buttons */
.tog-btn {
  display: inline-block; font-family: var(--tog-font-body); font-weight: 600;
  font-size: 15px; padding: 14px 28px; border-radius: var(--tog-radius);
  border: none; cursor: pointer; text-align: center;
}
.tog-btn--primary { background: var(--tog-accent); color: #fff; }
.tog-btn--dark    { background: var(--tog-ink); color: #fff; padding: 9px 18px; border-radius: 8px; }
.tog-btn--ghost   { background: transparent; color: var(--tog-ink-strong); border: 2px dashed #C9A24A; }
.tog-btn[disabled] { background: #A9905F; cursor: wait; }

/* Cards */
.tog-card {
  background: #fff; border: var(--tog-stitch);
  border-color: #E0D6C2; border-radius: var(--tog-radius-lg); padding: 22px 24px;
}
.tog-card--solid { border: 1.5px solid var(--tog-line-solid); }

/* Category tag chip */
.tog-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--tog-font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: var(--tog-radius-pill);
  padding: 3px 11px; border: 1.5px dashed currentColor;
}

.tog-tag--solid {
  border: none; background: #F3EEE4; color: var(--tog-text-mute);
  font-size: 10.5px; padding: 4px 11px;
}

/* Product image tile + carousel */
.tog-tile {
  height: 218px; border: 1.5px solid var(--tog-line-solid);
  border-radius: var(--tog-radius); background: var(--tog-tile);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.tog-tile img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.tog-scroller {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 2px 12px;
}
.tog-scroller > * { flex: 0 0 258px; scroll-snap-align: start; }

/* Tables — materials, spec, comparison */
.tog-table { width: 100%; border-collapse: collapse; font-size: 14px;
  border: var(--tog-stitch); border-radius: var(--tog-radius); overflow: hidden; }
.tog-table thead tr { background: var(--tog-espresso); color: var(--tog-on-dark); }
.tog-table th { text-align: left; padding: 12px 16px;
  font-family: var(--tog-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; }
.tog-table td { padding: 13px 16px; color: var(--tog-text-soft); }
.tog-table td.tog-td-key { color: var(--tog-ink); font-weight: 600; }
.tog-table td.tog-td-mono { font-family: var(--tog-font-mono); }
.tog-table tbody tr { border-bottom: 1px solid var(--tog-line-solid); }
.tog-table tbody tr:nth-child(even) { background: var(--tog-surface-2); }

/* Dark blocks (contact CTA, sidebars, footer) */
.tog-dark { background: var(--tog-espresso); color: var(--tog-on-dark); }
.tog-dark h2 { color: #fff; }
.tog-footer {
  padding: 26px var(--tog-pad-x); background: var(--tog-espresso-deep);
  color: var(--tog-text-mute);
  font-family: var(--tog-font-mono); font-size: 11px; letter-spacing: 0.06em;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.tog-footer a { color: var(--tog-on-dark); }

/* ---------------------------------------------------------------------------
   6. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --tog-pad-x: 22px; --tog-section-y: 36px; }
  .tog-nav { gap: 14px; font-size: 13px; }
  .tog-scroller > * { flex-basis: 220px; }
}