/* Octamira Design System — bundled (token imports inlined to remove the render-blocking chain). */

/* ===== tokens/colors.css ===== */
/* Octamira — Color
   Material-led, restrained. Anchored in a warm architectural near-black (ink)
   and a warm off-white (bone). Stone neutrals carry the texture; ONE quiet clay
   accent is used sparingly. Partner photography supplies the real color. */

:root {
  /* --- Base scale: warm off-whites (bone / bianco) --- */
  --bone:           #F4F0E9; /* primary surface */
  --bone-raised:    #ECE7DD; /* alt / raised panels */
  --bone-sunken:    #E3DBCE; /* sunken wells, hairline fills */

  /* --- Base scale: warm near-black (ink) --- */
  --ink:            #1B1815; /* primary text + dark surfaces */
  --ink-raised:     #262019; /* raised panel on dark sections */
  --ink-700:        #3A332B; /* borders / dividers on dark */

  /* --- Stone neutrals --- */
  --cement:         #8C867C; /* cement grey — decorative / large text only */
  --cement-deep:    #625C53; /* muted body text on bone (AA) */
  --sand:           #C7BBA9; /* warm sand / tortora */
  --sand-deep:      #B0A28C; /* deeper tortora */
  --linen:          #DAD2C5; /* hairline lines on bone */
  --linen-strong:   #C9C0B2; /* stronger hairline / inputs */

  /* --- Brand accents, drawn from the logo --- */
  --blue:           #2E549A; /* logo ring blue — primary interactive accent */
  --blue-strong:    #224080; /* hover / pressed */
  --blue-deep:      #1B3568; /* dense / text on tint */
  --blue-tint:      #E7EBF4; /* faint wash — selection / hover fills */

  --red:            #AD3439; /* logo M red — reserved highlight, used sparingly */
  --red-strong:     #8F2A2E; /* hover / pressed */
  --red-tint:       #F5E4E3; /* faint wash */

  /* --- Clay — warm tertiary tone (optional, no longer the system accent) --- */
  --clay:           #A1583B;
  --clay-strong:    #874A31;
  --clay-tint:      #EFE2D9;

  /* --- Semantic status (muted, architectural) --- */
  --positive:       #5E6B4F; /* olive — in stock / confirmed */
  --warning:        #9A6B2F; /* ochre — limited / lead time */
  --critical:       #8A3B2E; /* brick — error */

  /* ===================== SEMANTIC ALIASES ===================== */
  /* Surfaces */
  --color-surface:        var(--bone);
  --color-surface-raised: var(--bone-raised);
  --color-surface-sunken: var(--bone-sunken);
  --color-surface-invert: var(--ink);

  /* Text / ink */
  --color-ink:        var(--ink);
  --color-text:       var(--ink);
  --color-muted:      var(--cement-deep);
  --color-faint:      var(--cement);
  --color-on-invert:  var(--bone);
  --color-muted-invert: #A89F90;

  /* Lines */
  --color-line:        var(--linen);
  --color-line-strong: var(--linen-strong);
  --color-line-invert: var(--ink-700);

  /* Accent — brand blue */
  --color-accent:        var(--blue);
  --color-accent-strong: var(--blue-strong);
  --color-accent-tint:   var(--blue-tint);

  /* Highlight — brand red, reserved for sparing emphasis */
  --color-highlight:        var(--red);
  --color-highlight-strong: var(--red-strong);
  --color-highlight-tint:   var(--red-tint);

  /* Focus ring */
  --color-focus: var(--blue);
}

/* ===================== DARK SECTION VARIANT =====================
   Apply to any full-bleed dark band (hero, footer, manifesto on ink).
   Flips the semantic surface/text aliases; base scale stays intact. */
[data-theme="dark"],
.theme-dark {
  --color-surface:        var(--ink);
  --color-surface-raised: var(--ink-raised);
  --color-surface-sunken: #141210;
  --color-surface-invert: var(--bone);

  --color-text:       var(--bone);
  --color-ink:        var(--bone);
  --color-muted:      var(--color-muted-invert);
  --color-faint:      #7C746A;
  --color-on-invert:  var(--ink);

  --color-line:        var(--ink-700);
  --color-line-strong: #4A4238;

  --color-accent:        #7B9BD9; /* blue lifts on dark for AA */
  --color-accent-strong: #98B2E4;
  --color-highlight:        #DA7A72; /* red lifts on dark for AA */
  --color-highlight-strong: #E59189;
}

/* Contrast notes (WCAG 2.1, normal text unless stated):
   ink #1B1815 on bone #F4F0E9 .......... 14.6:1  AAA
   cement-deep #625C53 on bone .......... 6.2:1   AA   (body)
   cement #8C867C on bone ............... 2.7:1   large/decorative ONLY
   blue #2E549A on bone ................. 6.4:1   AA   (links, primary, focus)
   red  #AD3439 on bone ................. 5.0:1   AA   (highlight, used sparingly)
   bone on ink .......................... 14.6:1  AAA
   blue #7B9BD9 on ink .................. 6.7:1   AA   (links on dark)
   red  #DA7A72 on ink .................. 6.2:1   AA   (highlight on dark) */

/* ===== tokens/typography.css ===== */
/* Octamira — Typography
   Editorial serif display (Spectral) over a clean neutral grotesque (Hanken
   Grotesk). Modular scale ≈ 1.25 (major third), generous line-height, calm
   tracking. Technical mono (IBM Plex Mono) for dimensions and spec captions. */

:root {
  /* --- Families --- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Weights --- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* --- Fluid scale (≈1.25), clamp(min, fluid, max) --- */
  --text-display: clamp(2.75rem, calc(1.55rem + 5.6vw), 5.5rem);  /*  44 → 88 */
  --text-h1:      clamp(2.25rem, calc(1.65rem + 2.9vw), 3.5rem);  /*  36 → 56 */
  --text-h2:      clamp(1.85rem, calc(1.45rem + 1.9vw), 2.75rem); /*  30 → 44 */
  --text-h3:      clamp(1.5rem, calc(1.3rem + 0.95vw), 2rem);     /*  24 → 32 */
  --text-h4:      1.375rem;   /* 22 */
  --text-body-lg: 1.1875rem;  /* 19 — editorial lede */
  --text-body:    1.0625rem;  /* 17 — default */
  --text-small:   0.9375rem;  /* 15 */
  --text-caption: 0.8125rem;  /* 13 */
  --text-eyebrow: 0.75rem;    /* 12 — overline */

  /* --- Line heights --- */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.16; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* --- Letter spacing --- */
  --ls-display: -0.025em; /* @kind other */
  --ls-heading: -0.015em; /* @kind other */
  --ls-normal:  0em; /* @kind other */
  --ls-wide:    0.04em; /* @kind other */
  --ls-eyebrow: 0.2em; /* @kind other */
}

/* ===== tokens/spacing.css ===== */
/* Octamira — Spacing, grid & radius
   8px spacing scale with 4px half-step. 12-column grid, comfortable max width,
   gallery-grade vertical rhythm. Near-zero corner radius everywhere. */

:root {
  /* --- 8px scale (4 = half step) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --space-13: 160px;

  /* --- Layout / grid --- */
  --container-max:    1320px; /* outer content width */
  --container-narrow: 760px;  /* editorial reading measure */
  --grid-columns:     12; /* @kind other */
  --gutter:           24px;   /* column gap (desktop) */
  --gutter-tight:     16px;

  /* --- Section vertical padding (responsive set below) --- */
  --section-pad:        var(--space-12); /* desktop  128 */
  --section-pad-tablet: var(--space-11); /* tablet    96 */
  --section-pad-mobile: var(--space-9);  /* mobile    64 */

  /* --- Page inset (horizontal margin) --- */
  --page-inset:        clamp(20px, 5vw, 64px);

  /* --- Radius — architectural, near-zero --- */
  --radius-0:    0px;     /* default — sharp */
  --radius-1:    2px;     /* inputs, subtle softening */
  --radius-2:    3px;     /* cards, dialogs (max) */
  --radius-full: 999px;   /* avatars / status dots only */

  /* --- Elevation — used sparingly; hairlines preferred over shadow --- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(27, 24, 21, 0.05);
  --shadow-2: 0 8px 24px -12px rgba(27, 24, 21, 0.18);   /* dropdowns */
  --shadow-3: 0 24px 64px -24px rgba(27, 24, 21, 0.28);  /* dialogs */

  /* --- Hairline border shorthand --- */
  --border-hairline: 1px solid var(--color-line); /* @kind other */
  --border-strong:   1px solid var(--color-line-strong); /* @kind other */

  /* --- Z-index --- */
  --z-nav:     100; /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-toast:   1100; /* @kind other */
}

@media (max-width: 1024px) {
  :root { --section-pad: var(--section-pad-tablet); --gutter: 20px; }
}
@media (max-width: 640px) {
  :root { --section-pad: var(--section-pad-mobile); --gutter: var(--gutter-tight); }
}

/* ===== tokens/motion.css ===== */
/* Octamira — Motion
   Subtle, slow, intentional. Nothing bouncy. Entrances fade + small rise;
   hovers shift opacity/colour; images reveal slowly. Honour reduced-motion. */

:root {
  /* --- Durations --- */
  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    180ms; /* @kind other */
  --dur-base:    280ms; /* @kind other */
  --dur-slow:    480ms; /* @kind other */
  --dur-reveal:  760ms; /* @kind other */

  /* --- Easing (no overshoot) --- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);     /* @kind other */
  --ease-inout:    cubic-bezier(0.65, 0.0, 0.35, 1); /* @kind other */

  /* --- Common composites --- */
  --transition-color:   color var(--dur-fast) var(--ease-standard),
                        background-color var(--dur-fast) var(--ease-standard),
                        border-color var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-opacity: opacity var(--dur-base) var(--ease-out); /* @kind other */
  --transition-rise:    transform var(--dur-slow) var(--ease-out),
                        opacity var(--dur-slow) var(--ease-out); /* @kind other */

  /* Entrance offset / hover scale */
  --rise-distance: 16px; /* @kind spacing */
  --img-hover-scale: 1.03; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
    --rise-distance: 0px; /* @kind spacing */
    --img-hover-scale: 1; /* @kind other */
  }
}

/* ===== tokens/base.css ===== */
/* Octamira — Base
   Light element defaults + a small set of typographic helpers so specimen
   cards, components and kits render on-brand out of the box. Tokens come from
   the files imported ahead of this one. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-surface);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — editorial serif, tight tracking */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); }

p { margin: 0 0 var(--space-5); text-wrap: pretty; }

a { color: var(--color-accent); text-decoration: none; transition: var(--transition-color); }
a:hover { color: var(--color-accent-strong); }

::selection { background: var(--color-accent-tint); color: var(--color-ink); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

hr { border: 0; border-top: var(--border-hairline); margin: var(--space-8) 0; }

small { font-size: var(--text-small); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* ---------- Helpers ---------- */

.oc-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-light);
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}

/* Eyebrow / overline — tracked grotesque caps */
.oc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  display: inline-block;
}

.oc-lede {
  font-size: var(--text-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.oc-mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--ls-normal);
  color: var(--color-muted);
}

.oc-caption {
  font-size: var(--text-caption);
  line-height: var(--lh-normal);
  color: var(--color-muted);
}

/* Layout helpers */
.oc-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
}
.oc-narrow { max-width: var(--container-narrow); }

.oc-section { padding-block: var(--section-pad); }

.oc-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--gutter);
}