/* ============================================================================
   UNISOL HABITAT — THEMATIC DESIGN SYSTEM
   A modular token architecture balancing three aesthetics:
     · ARCHITECTURAL — structural rhythm, generous negative space, precision
     · FUTURISTIC    — NASA-grade display type, luminous accents, motion
     · ROYAL         — restrained gold, deep ink, ceremonial spacing
   The interface should read as a premium, high-tech living organism:
   calm surfaces that respond, breathe, and glow.

   USAGE
     @import "unisol-design-system.css";   (or paste into your theme)
   Everything is a CSS custom property, so you can retheme by overriding
   the :root block alone.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0 · FONT IMPORTS
   Display : Orbitron   — geometric, aerospace/NASA authority (FUTURISTIC)
   Royal   : Chakra Petch — technical-regal subheads (ROYAL)
   Body    : Inter      — highly legible technical text (ARCHITECTURAL)
   Mono    : Space Mono — instrument-panel labels & data
---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================================
   1 · DESIGN TOKENS  (the single source of truth)
   ============================================================================ */
:root {

  /* ------------------------------------------------------------------
     1.1 · COLOR — CORE PALETTE
     A quiet, architectural base (bone + ink) lit by two accents:
     a living mint (biophilic/high-tech) and a ceremonial gold (royal).
  ------------------------------------------------------------------ */

  /* Neutrals — the "concrete & paper" architectural spine */
  --u-ink:            #16181c;   /* near-black, primary text & dark surfaces */
  --u-ink-soft:       #3a3e45;   /* secondary text */
  --u-ink-mute:       #6b6f77;   /* tertiary / captions */
  --u-graphite:       #23262c;   /* elevated dark surface */
  --u-slate:          #2f333a;   /* dark surface border */

  --u-paper:          #fbfaf6;   /* lightest surface (cards) */
  --u-bone:           #f4f2ec;   /* page background */
  --u-fog:            #e9e6de;   /* subtle fill */
  --u-line:           #cfccc2;   /* hairline borders */
  --u-line-soft:      #e2dfd6;   /* faint dividers */

  /* Mint — the biophilic, living-organism accent (FUTURISTIC) */
  --u-mint:           #8fae9c;
  --u-mint-deep:      #5f7d6c;
  --u-mint-dark:      #47604f;
  --u-mint-glow:      rgba(143, 174, 156, 0.35);

  /* Gold — the ceremonial, royal accent (ROYAL) */
  --u-gold:           #c2a063;
  --u-gold-deep:      #9c7e44;
  --u-gold-dark:      #6f5a2f;
  --u-gold-glow:      rgba(194, 160, 99, 0.30);

  /* Signal colours (status / feedback) */
  --u-success:        #5f9e6b;
  --u-warning:        #c9922e;
  --u-danger:         #cf5a3c;
  --u-info:           #4d7fa6;

  /* ------------------------------------------------------------------
     1.2 · COLOR — SEMANTIC ALIASES
     Reference these in components, not the raw palette above, so a
     single override retheming stays consistent.
  ------------------------------------------------------------------ */
  --u-bg:             var(--u-bone);
  --u-bg-elevated:    var(--u-paper);
  --u-bg-inverse:     var(--u-ink);
  --u-surface-dark:   var(--u-graphite);

  --u-text:           var(--u-ink);
  --u-text-secondary: var(--u-ink-soft);
  --u-text-muted:     var(--u-ink-mute);
  --u-text-inverse:   var(--u-bone);

  --u-accent:         var(--u-mint-deep);   /* primary interactive accent */
  --u-accent-hover:   var(--u-mint);
  --u-royal:          var(--u-gold-deep);   /* ceremonial accent */
  --u-royal-hover:    var(--u-gold);

  --u-border:         var(--u-line);
  --u-border-soft:    var(--u-line-soft);
  --u-focus-ring:     var(--u-mint-glow);

  /* ------------------------------------------------------------------
     1.3 · GRADIENTS & LUMINANCE  (the "living / high-tech" layer)
  ------------------------------------------------------------------ */
  --u-grad-royal:     linear-gradient(135deg, var(--u-gold) 0%, var(--u-gold-deep) 100%);
  --u-grad-mint:      linear-gradient(135deg, var(--u-mint) 0%, var(--u-mint-deep) 100%);
  --u-grad-ink:       linear-gradient(160deg, #23262c 0%, #131417 70%);
  --u-grad-dawn:      linear-gradient(135deg, var(--u-gold) 0%, var(--u-mint-deep) 100%);
  --u-sheen:          linear-gradient(110deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);

  /* ------------------------------------------------------------------
     1.4 · TYPOGRAPHY — FAMILIES
  ------------------------------------------------------------------ */
  --u-font-display:   'Orbitron', 'Space Grotesk', system-ui, sans-serif;
  --u-font-royal:     'Chakra Petch', 'Space Grotesk', sans-serif;
  --u-font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --u-font-mono:      'Space Mono', ui-monospace, 'SF Mono', monospace;

  /* ------------------------------------------------------------------
     1.5 · TYPOGRAPHY — FLUID SCALE
     clamp(min, preferred, max) → smooth from mobile to desktop with
     no breakpoint jumps. A commanding display hierarchy.
  ------------------------------------------------------------------ */
  --u-fs-display:   clamp(2.6rem, 1.2rem + 6.4vw, 6.5rem);   /* hero */
  --u-fs-h1:        clamp(2.1rem, 1.3rem + 3.8vw, 4.0rem);
  --u-fs-h2:        clamp(1.7rem, 1.1rem + 3.0vw, 3.0rem);
  --u-fs-h3:        clamp(1.3rem, 1.0rem + 1.4vw, 1.8rem);
  --u-fs-h4:        clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem);
  --u-fs-lead:      clamp(1.15rem, 1.0rem + 1.0vw, 1.6rem);  /* intro paragraphs */
  --u-fs-body:      clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --u-fs-small:     clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --u-fs-label:     clamp(0.68rem, 0.66rem + 0.1vw, 0.76rem);  /* eyebrows */

  /* Line heights */
  --u-lh-tight:     1.05;
  --u-lh-snug:      1.2;
  --u-lh-normal:    1.5;
  --u-lh-relaxed:   1.68;

  /* Letter tracking — wide display tracking gives the royal/aerospace feel */
  --u-track-display: 0.02em;
  --u-track-royal:   0.01em;
  --u-track-body:    0;
  --u-track-label:   0.28em;   /* eyebrows / mono labels */
  --u-track-caps:    0.14em;

  /* Weights */
  --u-w-light:      300;
  --u-w-regular:    400;
  --u-w-medium:     500;
  --u-w-semibold:   600;
  --u-w-bold:       700;
  --u-w-black:      800;

  /* ------------------------------------------------------------------
     1.6 · SPACING — 4px base, architectural rhythm
     A modular scale; use the semantic section-spacing tokens for
     the ceremonial breathing room between major blocks.
  ------------------------------------------------------------------ */
  --u-space-0:   0;
  --u-space-1:   0.25rem;   /*  4px */
  --u-space-2:   0.5rem;    /*  8px */
  --u-space-3:   0.75rem;   /* 12px */
  --u-space-4:   1rem;      /* 16px */
  --u-space-5:   1.5rem;    /* 24px */
  --u-space-6:   2rem;      /* 32px */
  --u-space-7:   3rem;      /* 48px */
  --u-space-8:   4rem;      /* 64px */
  --u-space-9:   6rem;      /* 96px */
  --u-space-10:  8rem;      /* 128px */

  /* Fluid section spacing — the "ceremonial" vertical rhythm */
  --u-section-y:      clamp(3.5rem, 8vw, 8rem);
  --u-section-y-lg:   clamp(5rem, 11vw, 11rem);
  --u-gutter:         clamp(1.25rem, 4vw, 2.5rem);   /* page side padding */
  --u-content-max:    1200px;                        /* max content width */
  --u-measure:        68ch;                          /* readable line length */

  /* ------------------------------------------------------------------
     1.7 · RADII — soft-architectural corners
  ------------------------------------------------------------------ */
  --u-radius-xs:   4px;
  --u-radius-sm:   8px;
  --u-radius-md:   14px;
  --u-radius-lg:   20px;
  --u-radius-xl:   28px;
  --u-radius-pill: 999px;

  /* ------------------------------------------------------------------
     1.8 · ELEVATION — layered shadows + accent glows
     Soft, diffuse shadows (architectural) with optional luminous
     accent glows (living organism).
  ------------------------------------------------------------------ */
  --u-shadow-xs:  0 1px 2px rgba(22,24,28,.06);
  --u-shadow-sm:  0 4px 16px rgba(22,24,28,.06);
  --u-shadow-md:  0 8px 28px rgba(22,24,28,.10);
  --u-shadow-lg:  0 20px 60px rgba(22,24,28,.14);
  --u-shadow-xl:  0 32px 80px rgba(22,24,28,.18);
  --u-glow-mint:  0 0 28px var(--u-mint-glow);
  --u-glow-gold:  0 0 28px var(--u-gold-glow);
  --u-inset-hair: inset 0 0 0 1px rgba(255,255,255,.5);

  /* ------------------------------------------------------------------
     1.9 · MOTION — organic, breathing easings
  ------------------------------------------------------------------ */
  --u-ease-out:    cubic-bezier(.22, .61, .36, 1);     /* settle */
  --u-ease-spring: cubic-bezier(.34, 1.28, .44, 1);    /* slight overshoot */
  --u-ease-inout:  cubic-bezier(.65, .05, .36, 1);
  --u-dur-fast:    .18s;
  --u-dur-base:    .32s;
  --u-dur-slow:    .6s;
  --u-dur-breathe: 6s;    /* ambient idle loops */

  /* ------------------------------------------------------------------
     1.10 · LAYOUT — z-index scale & structural constants
  ------------------------------------------------------------------ */
  --u-z-base:      0;
  --u-z-raised:    10;
  --u-z-sticky:    100;
  --u-z-header:    500;
  --u-z-overlay:   1000;
  --u-z-modal:     2000;
  --u-z-toast:     3000;

  --u-border-w:    1px;
  --u-border-w-2:  2px;
  --u-ring-w:      3px;
}

/* ----------------------------------------------------------------------------
   1.11 · DARK CONTEXT
   Add class="u-dark" to any container (or <html>) to invert surfaces.
   Semantic aliases flip; the palette stays fixed.
---------------------------------------------------------------------------- */
.u-dark {
  --u-bg:             var(--u-ink);
  --u-bg-elevated:    var(--u-graphite);
  --u-bg-inverse:     var(--u-bone);
  --u-surface-dark:   #0f1114;
  --u-text:           var(--u-bone);
  --u-text-secondary: rgba(244,242,236,.72);
  --u-text-muted:     rgba(244,242,236,.5);
  --u-text-inverse:   var(--u-ink);
  --u-border:         rgba(255,255,255,.14);
  --u-border-soft:    rgba(255,255,255,.08);
}

/* ============================================================================
   2 · RESET & BASE  (minimal, non-destructive)
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

.u-scope {
  margin: 0;
  background: var(--u-bg);
  color: var(--u-text);
  font-family: var(--u-font-body);
  font-size: var(--u-fs-body);
  line-height: var(--u-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   3 · TYPOGRAPHY UTILITIES
   ============================================================================ */

/* Display — NASA-grade hero (FUTURISTIC) */
.u-display {
  font-family: var(--u-font-display);
  font-weight: var(--u-w-black);
  font-size: var(--u-fs-display);
  line-height: var(--u-lh-tight);
  letter-spacing: var(--u-track-display);
  color: var(--u-text);
}
.u-display em { font-style: normal; color: var(--u-royal); }

/* Headings — display family, descending scale */
.u-h1 { font-family: var(--u-font-display); font-weight: var(--u-w-bold); font-size: var(--u-fs-h1); line-height: var(--u-lh-snug); letter-spacing: var(--u-track-display); }
.u-h2 { font-family: var(--u-font-display); font-weight: var(--u-w-bold); font-size: var(--u-fs-h2); line-height: var(--u-lh-snug); letter-spacing: var(--u-track-display); }
.u-h3 { font-family: var(--u-font-royal);   font-weight: var(--u-w-semibold); font-size: var(--u-fs-h3); line-height: var(--u-lh-snug); letter-spacing: var(--u-track-royal); }
.u-h4 { font-family: var(--u-font-royal);   font-weight: var(--u-w-semibold); font-size: var(--u-fs-h4); line-height: var(--u-lh-normal); }

/* Lead paragraph */
.u-lead { font-family: var(--u-font-body); font-weight: var(--u-w-light); font-size: var(--u-fs-lead); line-height: var(--u-lh-normal); color: var(--u-text-secondary); max-width: var(--u-measure); }

/* Body */
.u-body { font-size: var(--u-fs-body); line-height: var(--u-lh-relaxed); color: var(--u-text-secondary); max-width: var(--u-measure); }

/* Eyebrow / label — instrument-panel mono (FUTURISTIC + ROYAL) */
.u-eyebrow {
  font-family: var(--u-font-mono);
  font-size: var(--u-fs-label);
  font-weight: var(--u-w-regular);
  letter-spacing: var(--u-track-label);
  text-transform: uppercase;
  color: var(--u-royal);
}
.u-eyebrow--mint { color: var(--u-accent); }

/* Data / spec readout */
.u-mono { font-family: var(--u-font-mono); font-size: var(--u-fs-small); letter-spacing: var(--u-track-caps); }

/* Small print */
.u-small { font-size: var(--u-fs-small); color: var(--u-text-muted); }

/* Colour helpers */
.u-text-gold { color: var(--u-royal); }
.u-text-mint { color: var(--u-accent); }
.u-text-muted { color: var(--u-text-muted); }

/* ============================================================================
   4 · LAYOUT PRIMITIVES
   ============================================================================ */

/* Section — ceremonial vertical rhythm */
.u-section   { padding-block: var(--u-section-y); }
.u-section--lg { padding-block: var(--u-section-y-lg); }

/* Centered content container with fluid gutters */
.u-container {
  width: 100%;
  max-width: var(--u-content-max);
  margin-inline: auto;
  padding-inline: var(--u-gutter);
}
.u-container--narrow { max-width: 820px; }
.u-container--wide   { max-width: 1440px; }

/* Auto-fit responsive grid */
.u-grid { display: grid; gap: var(--u-space-5); }
.u-grid--2 { grid-template-columns: repeat(2, 1fr); }
.u-grid--3 { grid-template-columns: repeat(3, 1fr); }
.u-grid--4 { grid-template-columns: repeat(4, 1fr); }
.u-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Flex helpers */
.u-row    { display: flex; gap: var(--u-space-4); align-items: center; }
.u-row--between { justify-content: space-between; }
.u-stack  { display: flex; flex-direction: column; gap: var(--u-space-4); }

/* Section header block (eyebrow + title + lead) */
.u-sec-head { display: flex; flex-direction: column; gap: var(--u-space-3); margin-bottom: var(--u-space-7); max-width: var(--u-measure); }

/* Responsive collapse */
@media (max-width: 900px) {
  .u-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .u-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .u-grid--2, .u-grid--3, .u-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   5 · COMPONENTS
   ============================================================================ */

/* ---- 5.1 · CARD ---------------------------------------------------------- */
.u-card {
  background: var(--u-bg-elevated);
  border: var(--u-border-w) solid var(--u-border);
  border-radius: var(--u-radius-lg);
  padding: var(--u-space-6);
  box-shadow: var(--u-shadow-sm);
  transition: transform var(--u-dur-base) var(--u-ease-out),
              box-shadow var(--u-dur-base) var(--u-ease-out);
}
.u-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--u-shadow-lg);
}
/* living-organism variant: lifts with an accent glow */
.u-card--glow:hover { box-shadow: var(--u-shadow-lg), var(--u-glow-mint); }

/* dark, high-contrast card (the "device" look) */
.u-card--dark {
  background: var(--u-grad-ink);
  color: var(--u-text-inverse);
  border-color: rgba(255,255,255,.06);
  box-shadow: var(--u-shadow-lg), var(--u-inset-hair);
}
.u-card__label { font-family: var(--u-font-mono); font-size: var(--u-fs-label); letter-spacing: var(--u-track-label); color: var(--u-royal); text-transform: uppercase; }
.u-card__title { font-family: var(--u-font-royal); font-weight: var(--u-w-semibold); font-size: var(--u-fs-h3); margin: var(--u-space-2) 0 var(--u-space-3); }
.u-card__text  { font-size: var(--u-fs-body); color: var(--u-text-secondary); line-height: var(--u-lh-relaxed); }

/* ---- 5.2 · BUTTON -------------------------------------------------------- */
.u-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--u-space-2);
  font-family: var(--u-font-royal);
  font-weight: var(--u-w-semibold);
  font-size: var(--u-fs-body);
  letter-spacing: var(--u-track-royal);
  padding: 0.85em 1.6em;
  border: none;
  border-radius: var(--u-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--u-dur-fast) var(--u-ease-out),
              background var(--u-dur-base) var(--u-ease-out),
              box-shadow var(--u-dur-base) var(--u-ease-out);
}
.u-btn:active { transform: translateY(1px); }
.u-btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--u-ring-w) var(--u-focus-ring); }

/* primary — mint (interactive) */
.u-btn--primary { background: var(--u-accent); color: #fff; }
.u-btn--primary:hover { background: var(--u-accent-hover); transform: translateY(-2px); box-shadow: var(--u-shadow-md); }

/* royal — ceremonial gold */
.u-btn--royal { background: var(--u-grad-royal); color: var(--u-ink); }
.u-btn--royal:hover { transform: translateY(-2px); box-shadow: var(--u-shadow-md), var(--u-glow-gold); }

/* ghost — architectural outline */
.u-btn--ghost { background: transparent; color: var(--u-text); border: var(--u-border-w) solid var(--u-border); }
.u-btn--ghost:hover { border-color: var(--u-accent); color: var(--u-accent); }

/* ---- 5.3 · BADGE / PILL -------------------------------------------------- */
.u-badge {
  display: inline-flex; align-items: center; gap: var(--u-space-1);
  font-family: var(--u-font-mono); font-size: var(--u-fs-label);
  letter-spacing: var(--u-track-caps); text-transform: uppercase;
  padding: 0.4em 0.85em; border-radius: var(--u-radius-pill);
  background: var(--u-fog); color: var(--u-ink-soft);
}
.u-badge--mint { background: var(--u-mint-glow); color: var(--u-mint-dark); }
.u-badge--gold { background: var(--u-gold-glow); color: var(--u-gold-dark); }
.u-badge--live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--u-success); box-shadow: 0 0 0 0 var(--u-success);
  animation: u-pulse 2s var(--u-ease-inout) infinite;
}

/* ---- 5.4 · INPUT --------------------------------------------------------- */
.u-field { display: flex; flex-direction: column; gap: var(--u-space-2); }
.u-label { font-size: var(--u-fs-small); font-weight: var(--u-w-medium); color: var(--u-text-secondary); }
.u-input {
  font-family: var(--u-font-body); font-size: var(--u-fs-body);
  padding: 0.8em 1em; color: var(--u-text);
  background: var(--u-bg-elevated);
  border: var(--u-border-w) solid var(--u-border);
  border-radius: var(--u-radius-sm);
  transition: border-color var(--u-dur-base), box-shadow var(--u-dur-base);
}
.u-input:focus { outline: none; border-color: var(--u-accent); box-shadow: 0 0 0 var(--u-ring-w) var(--u-focus-ring); }

/* ---- 5.5 · DIVIDER / RULE ------------------------------------------------ */
.u-rule { height: var(--u-border-w); background: var(--u-border); border: 0; }
.u-rule--gold { height: var(--u-border-w-2); background: var(--u-grad-royal); width: 64px; border-radius: var(--u-radius-pill); }

/* ---- 5.6 · SWATCH (docs) ------------------------------------------------- */
.u-swatch { border-radius: var(--u-radius-md); height: 84px; box-shadow: var(--u-inset-hair); }

/* ============================================================================
   6 · MOTION — keyframes (living organism)
   ============================================================================ */
@keyframes u-pulse {
  0%   { box-shadow: 0 0 0 0 var(--u-mint-glow); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes u-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
@keyframes u-sheen {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* utility: gentle breathing float for ambient elements */
.u-animate-float { animation: u-float var(--u-dur-breathe) var(--u-ease-inout) infinite; }
/* utility: light sheen sweep for premium surfaces */
.u-sheen { position: relative; overflow: hidden; }
.u-sheen::after {
  content: ''; position: absolute; inset: 0;
  background: var(--u-sheen); background-size: 200% 100%;
  animation: u-sheen 8s var(--u-ease-inout) infinite; pointer-events: none;
}

/* ============================================================================
   7 · ACCESSIBILITY
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:where(.u-scope) :focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; }