/* ==========================================================================
   Taakin Metals — brand system
   Tokens and shared components, transcribed from the Taakin Metals brand
   system design sheet. Values here are the sheet's values; do not invent new
   ones. The only accent is champagne gold. There is no fifth colour.
   Webfonts are Google Fonts (no licensed binaries supplied yet):
   Playfair Display = display serif · Montserrat = UI/body · IBM Plex Mono = figures.
   ========================================================================== */

:root {
  /* ---- base: the four brand swatches ---- */
  --tm-black: #0b0b0d;        /* DEEP BLACK  — web canvas */
  --tm-charcoal: #171717;     /* CHARCOAL    — raised dark surfaces */
  --tm-ivory: #f4f1eb;        /* IVORY       — light canvas (docs / ops) */
  --tm-gold-500: #c8a77a;     /* CHAMPAGNE GOLD — the only accent */

  /* ---- extended ramps ---- */
  --tm-charcoal-700: #1f1f23;
  --tm-charcoal-600: #2a2a2f;
  --tm-gold-300: #e2cda6;
  --tm-gold-600: #ab8a5c;
  --tm-gold-700: #8a6f49;
  --tm-ink: #1c1b19;          /* text on light */
  --tm-grey-600: #55524c;     /* secondary text on light */
  --tm-grey-400: #8a857c;     /* captions, table heads on light */
  --tm-paper: #fbfaf7;        /* card / page white */
  --tm-white: #ffffff;

  /* ---- hairlines ---- */
  --tm-hairline: #e4dfd5;                    /* on light */
  --tm-hairline-dark: rgba(200,167,122,.28); /* gold hairline on dark */
  --tm-rule-gold: linear-gradient(90deg, var(--tm-gold-500) 0%, transparent 60%);

  /* ---- semantic: dark register (web) ---- */
  --tm-surface-dark: var(--tm-black);
  --tm-surface-card-dark: #121214;
  --tm-text-on-dark: #f5f2ec;
  --tm-text-on-dark-dim: rgba(245,242,236,.62);
  --tm-text-on-dark-faint: rgba(245,242,236,.4);

  /* ---- semantic: light register (documents / ops) ---- */
  --tm-surface-light: var(--tm-ivory);
  --tm-surface-card: var(--tm-paper);
  --tm-text-body: var(--tm-ink);
  --tm-text-dim: var(--tm-grey-600);
  --tm-text-caption: var(--tm-grey-400);
  --tm-accent: var(--tm-gold-500);

  /* ---- status: tint background + deep same-hue text, always with a word ---- */
  --tm-ok-bg: #e9efe3;    --tm-ok-text: #3d6634;    /* settled / passed */
  --tm-warn-bg: #f5ecd7;  --tm-warn-text: #8a6b1f;  /* in refining / pending */
  --tm-risk-bg: #f6e3df;  --tm-risk-text: #93392c;  /* overdue / failed */
  --tm-info-bg: #e6ebef;  --tm-info-text: #33556e;  /* in transit / linked */

  /* ---- type ---- */
  --tm-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --tm-font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --tm-font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* tracking — everything uppercase is letterspaced */
  --tm-track-wordmark: 0.32em;   /* TAAKIN METALS */
  --tm-track-descriptor: 0.42em; /* PRECIOUS METAL line */
  --tm-track-nav: 0.14em;        /* site nav, buttons */
  --tm-track-label: 0.18em;      /* micro-labels, table heads, eyebrows */

  /* ---- spacing ---- */
  --tm-space-1: 4px;  --tm-space-2: 8px;  --tm-space-3: 12px;
  --tm-space-4: 16px; --tm-space-5: 24px; --tm-space-6: 32px;
  --tm-space-7: 48px; --tm-space-8: 64px; --tm-space-9: 96px;

  /* radii — near-sharp; luxury is square. 0 for anything printed. */
  --tm-radius-btn: 2px;
  --tm-radius-input: 2px;
  --tm-radius-card: 4px;
  --tm-radius-pill: 999px;   /* status badges only */
  --tm-radius-print: 0;

  /* layout */
  --tm-content-max: 1280px;
  --tm-page-max: 1360px;     /* the marketing pages run to 1360 */
  --tm-gutter: 24px;
  --tm-ops-sidebar: 232px;

  /* ---- elevation: restrained, hairlines do most of the separation work ---- */
  --tm-shadow-card: 0 1px 2px rgba(11,11,13,.06);
  --tm-shadow-raised: 0 2px 10px rgba(11,11,13,.10);
  --tm-shadow-panel: 0 24px 48px -12px rgba(11,11,13,.35);
  --tm-shadow-none: none;              /* print, and all dark surfaces */
  --tm-scrim: rgba(11,11,13,.5);       /* behind modals */

  /* page gutter collapses on small screens; the sheet's desktop value is 48px */
  --tm-pad-x: clamp(20px, 5vw, 48px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--tm-black); font-family: var(--tm-font-sans); }
a { color: var(--tm-gold-500); text-decoration: none; }
a:hover { color: var(--tm-gold-300); }
img, svg, canvas { max-width: 100%; }
@keyframes tmDrift { from { transform: translate(0,0); } to { transform: translate(-14px,8px); } }

.tm-page { min-height: 100vh; background: var(--tm-black); color: var(--tm-text-on-dark); }
.tm-wrap { max-width: var(--tm-page-max); margin: 0 auto; padding: 0 var(--tm-pad-x); }

/* section rhythm */
.tm-sec { position: relative; border-bottom: 1px solid var(--tm-hairline-dark); }
.tm-sec--light { background: var(--tm-ivory); }
.tm-sec > .tm-wrap { padding-top: var(--tm-space-8); padding-bottom: 110px; }

/* ---------- wordmark ---------- */
.tm-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tm-mark__name {
  font-family: var(--tm-font-display); font-weight: 500; font-size: 15px; line-height: 1;
  letter-spacing: var(--tm-track-wordmark); text-transform: uppercase;
  white-space: nowrap; color: var(--tm-text-on-dark);
}
.tm-mark__rule { width: 104px; height: 1px; background: var(--tm-rule-gold); opacity: .55; }
.tm-mark__desc {
  font-family: var(--tm-font-sans); font-weight: 600; font-size: 7.5px;
  letter-spacing: var(--tm-track-descriptor); text-transform: uppercase; color: var(--tm-gold-500);
}
a.tm-mark:hover .tm-mark__name { color: var(--tm-text-on-dark); }

/* ---------- nav ---------- */
.tm-nav {
  position: sticky; top: 0; z-index: 20; min-height: 72px;
  background: rgba(11,11,13,.92);
  border-bottom: 1px solid var(--tm-hairline-dark);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tm-space-5); padding: 0 var(--tm-pad-x);
}
.tm-nav__links { display: flex; gap: var(--tm-space-6); align-items: center; }
.tm-nav__link {
  font-family: var(--tm-font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tm-text-on-dark-dim);
  transition: color 200ms ease-in-out;
}
.tm-nav__link:hover { color: var(--tm-text-on-dark); }
.tm-nav__link--current { color: var(--tm-gold-500); }
.tm-nav__link--current:hover { color: var(--tm-gold-300); }

/* ---------- buttons ---------- */
.tm-btn {
  font-family: var(--tm-font-mono); text-transform: uppercase;
  background: transparent; border-radius: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--tm-space-3);
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}
.tm-btn--nav {
  font-size: 11px; letter-spacing: .16em; color: var(--tm-text-on-dark);
  border: 1px solid rgba(245,242,236,.35); padding: 10px 20px;
}
.tm-btn--nav:hover { background: var(--tm-ivory); color: var(--tm-black); }
.tm-btn--lead {
  font-size: 12px; letter-spacing: .2em; color: var(--tm-ink);
  border: 1px solid var(--tm-ink); padding: 16px 44px;
}
.tm-btn--lead:hover { background: var(--tm-black); color: var(--tm-ivory); }

/* ---------- headings ---------- */
.tm-h1 {
  margin: 0; font-family: var(--tm-font-display); font-weight: 400;
  font-size: clamp(34px, 6.2vw, 64px); line-height: 1.12;
  color: var(--tm-text-on-dark); text-wrap: pretty;
}
.tm-h2 {
  margin: 0; font-family: var(--tm-font-display); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.2; text-wrap: pretty;
  color: var(--tm-text-on-dark);
}
.tm-h2--ink { color: var(--tm-ink); }
.tm-accent-gold { color: var(--tm-gold-500); }
.tm-accent-gold-600 { color: var(--tm-gold-600); }

/* ---------- shared text ---------- */
.tm-rule { width: 64px; height: 1px; background: var(--tm-rule-gold); }
.tm-lede { margin: 0 0 var(--tm-space-4); font-size: 14px; line-height: 1.7; color: var(--tm-text-on-dark); }
.tm-lede--ink { color: var(--tm-ink); }
.tm-caption {
  font-family: var(--tm-font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tm-text-on-dark-faint);
}

/* bullet list — gold dot, baseline aligned */
.tm-bullets { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; line-height: 1.6; color: var(--tm-text-on-dark-dim); }
.tm-bullets li { display: flex; gap: var(--tm-space-3); align-items: baseline; list-style: none; }
.tm-bullets li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--tm-gold-500); flex-shrink: 0; transform: translateY(-2px);
}
.tm-bullets--ink { color: var(--tm-grey-600); font-size: 13px; }
.tm-bullets--ink li::before { background: var(--tm-gold-600); }
ul.tm-bullets { margin: 0; padding: 0; }

/* two-column intro block used at the head of most sections */
.tm-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px,1fr)); gap: 56px; align-items: start; }
.tm-split--tight { gap: var(--tm-space-7); }

/* ---------- footer ---------- */
.tm-footer {
  max-width: var(--tm-page-max); margin: 0 auto;
  padding: 40px var(--tm-pad-x) var(--tm-space-7);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.tm-footer__meta {
  text-align: right; font-family: var(--tm-font-mono);
  font-size: 10px; line-height: 2; color: var(--tm-text-on-dark-faint);
}

/* ==========================================================================
   Responsive. The design sheet is drawn at desktop width; these are the
   collapses that keep the same values readable on narrow screens.
   ========================================================================== */
@media (max-width: 900px) {
  .tm-split { grid-template-columns: 1fr; gap: var(--tm-space-6); }
  .tm-sec > .tm-wrap { padding-bottom: var(--tm-space-8); }
  .tm-nav { flex-wrap: wrap; padding-top: var(--tm-space-3); padding-bottom: var(--tm-space-3); }
  .tm-nav__links { gap: var(--tm-space-5); }
  .tm-footer { flex-direction: column; align-items: flex-start; gap: var(--tm-space-5); }
  .tm-footer__meta { text-align: left; }
}
@media (max-width: 600px) {
  .tm-nav__links { gap: var(--tm-space-4); flex-wrap: wrap; }
  .tm-nav__link { font-size: 10px; }
  .tm-btn--nav { padding: 9px 14px; font-size: 10px; }
  .tm-btn--lead { padding: 14px 28px; }
}