/* ─────────────────────────────────────────────────────────────────────────────
   Seismocode Design System — Colors & Type
   ─────────────────────────────────────────────────────────────────────────────
   Dark, institutional, mining-tech. Cinematic backgrounds with a single brand
   green accent and earth-tone data palette. Poppins everywhere. JetBrains Mono
   for technical readouts (telemetry, depth, Vs values).
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ── BRAND ────────────────────────────────────────────────────────────── */
  /* Subsurface green — geological, not horticultural.                       */
  /* Reads as deep moss / wet shale; never as "sustainability brand".        */
  --brand-green:        #27422A;   /* PRIMARY · institutional / industrial   */
  --brand-green-2:      #355A38;   /* hover lift, secondary fill             */
  --brand-green-3:      #4A7A4D;   /* tertiary — interactive accent on dark  */
  --brand-green-mark:   #2A8835;   /* legacy logo mark colour (raster files) */
  --brand-mark-grey:    #6E6E6E;   /* "CODE" wordmark grey                   */

  /* ── EARTH / SURFACE (foundational neutrals) ──────────────────────────── */
  /* Layered like rock: surface → sedimentary → transition → basement.       */
  --earth-0:  #000000;   /* true black, only for full-bleed cinematics       */
  --earth-1:  #060E1C;   /* basement — primary canvas                       */
  --earth-2:  #0F1B2E;   /* transition — panels, modals                      */
  --earth-3:  #162338;   /* sedimentary — cards on canvas                    */
  --earth-4:  #1E2F48;   /* altered — raised surfaces, table rows            */
  --earth-5:  #2D3748;   /* soil — borders, dividers                         */
  --earth-6:  #475569;   /* topsoil — muted text, disabled                   */

  /* ── FOREGROUND TEXT ──────────────────────────────────────────────────── */
  --fg-1: #FFFFFF;       /* high-emphasis: headlines, KPI numbers            */
  --fg-2: #CBD5E1;       /* body text on dark                                */
  --fg-3: #94A3B8;       /* secondary text, captions                         */
  --fg-4: #7B8FA1;       /* tertiary, axis labels, timestamps                */
  --fg-5: #475569;       /* placeholder, disabled                            */

  /* ── DATA / SEMANTIC ──────────────────────────────────────────────────── */
  /* Mapped to the Vs (shear-wave velocity) palette used in product:         */
  /* red(slow/soft) → orange → amber → green → cyan → blue (fast/basement)   */
  --data-red:    #E11D48;   /* alert / surface deformation                   */
  --data-orange: #FF6B35;   /* warning / shallow / transition                */
  --data-amber:  #F0A830;   /* caution / mid-depth                           */
  --data-green:  #22C55E;   /* nominal / live status                         */
  --data-cyan:   #00D4F5;   /* data accent / interactive primary             */
  --data-cyan-deep: #0891B2;
  --data-blue:   #1D8BC9;   /* basement / depth                              */
  --data-indigo: #11468C;   /* deepest layer                                 */

  /* Semantic aliases */
  --accent:        var(--brand-green);     /* PRIMARY action (CTAs)          */
  --accent-hover:  var(--brand-green-2);
  --accent-on-dark:var(--brand-green-3);    /* emphasis word on dark canvas   */
  --state-cyan:    var(--data-cyan);        /* selected / hover / chart line  */
  --state-cyan-deep: var(--data-cyan-deep);
  --positive:      var(--data-green);
  --warning:       var(--data-amber);
  --critical:      var(--data-red);
  --info:          var(--data-blue);

  /* Surface elevation tokens (for cards / chrome on dark) */
  --surface:       var(--earth-2);
  --surface-raised:var(--earth-3);
  --surface-hover: var(--earth-4);
  --border-faint:  rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  /* ── TYPE ─────────────────────────────────────────────────────────────── */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — the deck uses Extra-Light for headlines & Bold for emphasis.  */
  --w-thin:        200;
  --w-light:       300;
  --w-regular:     400;
  --w-medium:      500;
  --w-semibold:    600;
  --w-bold:        700;
  --w-extrabold:   800;

  /* Type scale (display 1080-canvas → app UI) — premium-restrained.
     Hero claims read like Palantir / Rio Tinto investor materials, not like
     a futurist marketing site. We err small. */
  --t-display-1: 72px;   /* slide title hero (was 96)         */
  --t-display-2: 56px;   /* slide hero stat                   */
  --t-display-3: 44px;   /* section / divider headline        */
  --t-h1: 34px;          /* product page hero                 */
  --t-h2: 26px;          /* section title                     */
  --t-h3: 20px;          /* card title                        */
  --t-h4: 16px;          /* sub-card title                    */
  --t-body: 14px;        /* body text in product UI           */
  --t-body-sm: 12.5px;   /* table cells, dense UI             */
  --t-caption: 11.5px;   /* axis labels, captions             */
  --t-eyebrow: 10.5px;   /* tracked uppercase labels          */

  /* ── SPACE ────────────────────────────────────────────────────────────── */
  /* 4px base. Used for padding, gap and layout rhythm.                      */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 96px;
  --s-12: 128px;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  /* Industrial-OS feel. Sharper than the previous pass — geological tools,
     not consumer apps.                                                       */
  --r-sm: 2px;       /* chips, tags, table cells           */
  --r-md: 4px;       /* buttons, inputs                    */
  --r-lg: 6px;       /* cards                              */
  --r-xl: 8px;       /* modals, hero panels                */
  --r-full: 999px;   /* status pills only                  */

  /* ── ELEVATION ───────────────────────────────────────────────────────── */
  /* Subtle. Most surfaces sit flush. A single 1px hairline is the primary
     separator. Real shadows only on detached / floating things.              */
  --elev-0: none;
  --elev-1: 0 1px 2px 0 rgba(0,0,0,0.35);
  --elev-2: 0 2px 8px -2px rgba(0,0,0,0.45);
  --elev-3: 0 8px 24px -8px rgba(0,0,0,0.6);
  --elev-focus: 0 0 0 2px rgba(74,122,77,0.45);

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
  --dur-cinematic: 1200ms;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEMANTIC TYPE — drop on a tag or use the class directly.
   All sizes use clamp() so they scale gently in product UI but lock at large
   sizes inside slide decks (which are wrapped in their own scale).
   ───────────────────────────────────────────────────────────────────────── */

.t-display-1 {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--t-display-1);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--t-display-2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.t-display-3 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-display-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-h1);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-h3);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--fg-1);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg-3);
}

/* Eyebrow / kicker — tracked uppercase. Used liberally in decks above titles
   ("CONTINUOUS · PASSIVE · BEHAVIOURAL") and in product UI section headers. */
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Numeric / mono — for telemetry, depth, Vs values, coordinates, timestamps. */
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: var(--t-body-sm);
  letter-spacing: 0;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.t-stat {
  font-family: var(--font-display);
  font-weight: var(--w-thin);
  font-size: var(--t-display-2);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Brand-green emphasis — readable on dark canvas.
   Reserved for ONE word per surface. Never a fill.                         */
.t-emph        { color: var(--brand-green-3); font-weight: var(--w-medium); }
.t-emph-cyan   { color: var(--data-cyan); font-weight: var(--w-medium); }   /* state only */
.t-emph-amber  { color: var(--data-amber); font-weight: var(--w-medium); }