/*
 * ═══════════════════════════════════════════════════════════════
 * TESSERACTIC — BASE STYLESHEET
 * ═══════════════════════════════════════════════════════════════
 *
 * Version:   0.1
 * Date:      30 April 2026
 * Author:    Diane — Creative Director, Saint Clair Pte. Ltd.
 *
 * Purpose:   Shared foundations for every Tesseractic context.
 *            Reset, typography, brand elements (pastis rule, labels,
 *            mono metadata, selection). Context-neutral — no page
 *            size, no register bias.
 *
 * Hierarchy: Layer 1 (Base)
 *            Imports: tesseractic-tokens.css (Layer 0)
 *            Imported by: web, docs (Layer 2)
 *
 * ═══════════════════════════════════════════════════════════════
 */

@import url('./tesseractic-tokens.css?v=20260930a');


/* =================================================================
   1. RESET
   ================================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

table {
  border-collapse: collapse;
}


/* =================================================================
   2. BASE TYPOGRAPHY
   Tabular lining numerals are the default. Numbers are carved figures.
   ================================================================= */

body {
  font-family: var(--t-font-primary);
  font-weight: var(--t-w-light);
  line-height: 1.55;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── Headings — all caps, lapidary tracking by default ──── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--t-font-primary);
  font-weight: var(--t-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--t-track-lapidary);
  line-height: 1.05;
}

strong, b {
  font-weight: var(--t-w-medium);
}

em, i {
  font-style: italic;
  color: inherit;
}

/* ── Links ── */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-color: var(--t-pastis);
  text-underline-offset: 3px;
  transition: color 120ms ease-out;
}

a:hover {
  color: var(--t-pastis);
}


/* =================================================================
   3. BRAND ELEMENTS — Shared across all contexts
   ================================================================= */

/* ── Pastis rule (the only ornament — replaces Saint Clair gold rule) ── */

.t-rule {
  width: var(--t-rule-long);
  height: var(--t-rule-height);
  background-color: var(--t-pastis);
  border: none;
  display: block;
}

.t-rule--short { width: var(--t-rule-short); }
.t-rule--mid   { width: var(--t-rule-mid); }
.t-rule--long  { width: var(--t-rule-long); }


/* ── Section label — Space Mono caps, pastis amber ── */

.t-label {
  font-family: var(--t-font-mono);
  font-size: 10px;
  font-weight: var(--t-w-regular);
  text-transform: uppercase;
  letter-spacing: var(--t-track-lapidary);
  color: var(--t-pastis);
  line-height: 1.5;
}

.t-label--small {
  font-size: 9px;
}


/* ── Metadata — Space Mono, muted ── */

.t-meta {
  font-family: var(--t-font-mono);
  font-size: 10px;
  font-weight: var(--t-w-regular);
  letter-spacing: var(--t-track-wider);
  text-transform: uppercase;
  color: var(--t-mute);
  line-height: 1.6;
}


/* ── Wordmark — Jost lapidary all-caps ── */

.t-wordmark {
  font-family: var(--t-font-primary);
  font-weight: var(--t-w-bold);
  letter-spacing: var(--t-track-lapidary);
  text-transform: uppercase;
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* ── Inscription — Jost monumental caps ── */

.t-inscription {
  font-family: var(--t-font-primary);
  font-weight: var(--t-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--t-track-display);
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* ── Body text — Jost light, no max-width by default ── */

.t-body {
  font-family: var(--t-font-primary);
  font-weight: var(--t-w-light);
  line-height: 1.55;
}


/* ── Tabular numerals helper ── */

.t-tnum {
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* =================================================================
   4. SELECTION
   ================================================================= */

::selection {
  background: var(--t-pastis);
  color: var(--t-pine);
}


/* =================================================================
   5. UTILITIES
   ================================================================= */

.t-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.t-hidden { display: none !important; }

.t-flex { display: flex; }
.t-block { display: block; }
.t-inline-block { display: inline-block; }


/* =================================================================
   6. THE MARK — Geometry-immutable inline use
   The mark's polygon coordinates and viewBox are sacred. This file
   provides only the canonical sizing and stroke utility classes.
   Polygon fills are set inline per register and per treatment.
   See: tesseractic.com/htdocs/assetsc/img/mark-*.svg for SVG sources.
   ================================================================= */

.t-mark {
  display: block;
  width: auto;
  height: auto;
}

.t-mark--xs   { width: 14px; }
.t-mark--sm   { width: 18px; }
.t-mark--md   { width: 30px; }
.t-mark--lg   { width: 60px; }
.t-mark--xl   { width: 96px; }
.t-mark--hero { width: 200px; }