/* ============================================================
   TENSOR — Colors & Type
   AI automation agency · warm-dark cinematic (Oryzo-inspired)
   Source of truth: tensorcorporate/tensorstorefront codebase
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@200..800&display=swap');

:root {
  /* ---- RAW COLOR TOKENS ---------------------------------- */

  /* Warm near-black is the foundation — NEVER pure black or grey. */
  --black: #000000;
  --bg-0: #000000;          /* page base (warm void) */
  --bg-1: #000000;          /* faint raised surface */
  --bg-2: #000000;          /* deepest void / screen bg */
  --void: #000000;
  --void-deep: #000000;

  /* Warm cream — the single light color (Oryzo #ffedd7 family). */
  --white: #ffffff;
  --cream: #ffffff;
  --fg-1: rgba(255, 255, 255, 1);      /* headlines, key UI */
  --fg-2: rgba(255, 255, 255, 0.80);   /* strong body / nav active */
  --fg-3: rgba(255, 255, 255, 0.68);   /* default body copy */
  --fg-4: rgba(255, 255, 255, 0.58);   /* muted / secondary copy */
  --fg-5: rgba(255, 255, 255, 0.42);   /* hints, scroll cues */

  /* Warm muted neutrals for mono/meta text */
  --neutral-400: #a3a3a3;
  --neutral-500: #7c7c7c;   /* mono labels — ~5:1 on black (WCAG AA) */
  --neutral-600: #525252;   /* footer / faint mono */

  /* Glass surface tokens — the core material */
  --glass-fill: rgba(255, 255, 255, 0.05);
  --glass-fill-soft: rgba(255, 255, 255, 0.04);
  --glass-fill-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-hover: rgba(255, 255, 255, 0.22);
  --glass-ring: rgba(255, 255, 255, 0.15);

  /* Accent — BURNT ORANGE ember (Oryzo #d4d4d4 / #ffffff).
     Hairline use ONLY: 1px borders, icon strokes, tiny ticks. Never fill. */
  --accent: #ffffff;        /* ember — primary hairline accent */
  --accent-bright: #ffffff; /* lighter ember */
  --accent-deep: #d4d4d4;   /* deep burnt orange */
  --ember: #ffffff;
  --accent-bg: rgba(255,255,255, 0.08);
  --accent-line: rgba(255,255,255, 0.45);

  /* Functional semantics (compare / offers) — warm-neutral, ember for signal */
  --danger: rgba(255, 255, 255, 0.5);  /* negatives read as dim cream */
  --danger-bg: rgba(255, 255, 255, 0.03);
  --warn: #ffffff;          /* founding-partner offer highlight (ember) */
  --warn-bg: rgba(255,255,255, 0.06);

  /* ---- TYPE FAMILIES ------------------------------------- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* wordmark, hero */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;            /* italic emphasis */
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- TYPE SCALE (px @ desktop) ------------------------- */
  --text-hero: 3rem;        /* 48px — h1, scales to 60px on lg */
  --text-h2: 2.25rem;       /* 36px section heads */
  --text-h3: 1.5rem;        /* 24px card heads */
  --text-lg: 1.125rem;      /* 18px lead */
  --text-base: 1rem;        /* 16px body */
  --text-sm: 0.875rem;      /* 14px default body copy */
  --text-xs: 0.75rem;       /* 12px meta */
  --text-label: 0.6875rem;  /* 11px mono eyebrow labels */
  --text-micro: 0.625rem;   /* 10px mono tags */

  /* ---- FLUID TYPE SCALE (rem-based: honors user font-size settings) ---- */
  --fs-xl:      clamp(1.375rem, 3vw, 2rem);        /* card titles */
  --fs-2xl:     clamp(1.625rem, 3.5vw, 2.25rem);   /* .h2 section heads */
  --fs-3xl:     clamp(1.9rem, 4.6vw, 3rem);        /* .h1 */
  --fs-4xl:     clamp(1.9rem, 3.6vw, 2.7rem);      /* reel titles */
  --fs-5xl:     clamp(2.5rem, 7.4vw, 6rem);        /* big section titles */
  --fs-display: clamp(3.25rem, 9.5vw, 9.25rem);    /* hero */

  --tracking-label: 0.2em;  /* eyebrow labels */
  --tracking-tag: 0.15em;   /* small mono tags */
  --tracking-tight: -0.02em;/* large display headings */

  /* ---- RADII --------------------------------------------- */
  --radius-pill: 9999px;
  --radius-3xl: 1.5rem;     /* 24px — primary glass cards */
  --radius-2xl: 1rem;       /* 16px — inner panels, inputs */
  --radius-xl: 0.75rem;     /* 12px — buttons, chips */
  --radius-lg: 0.5rem;      /* 8px — small tags */

  /* ---- SHADOWS / ELEVATION ------------------------------- */
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-card-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 255, 255, 0.04);
  --glow-white: 0 0 32px rgba(255, 255, 255, 0.15);
  --glow-accent: 0 0 50px rgba(255, 255, 255, 0.10);

  /* ---- MOTION -------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 0.8s;
  --dur-card: 0.35s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — apply directly to tags / classes
   ============================================================ */

.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--fg-1);
}

.ds-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-3);
}

.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--fg-4);
}

/* Italic serif emphasis — the brand's one expressive flourish */
.ds-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

/* Mono eyebrow label — sits above most section headings */
.ds-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--neutral-500);
}

.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

.ds-tag {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}

/* ============================================================
   GLASS MATERIAL — the signature surface
   ============================================================ */

.ds-glass {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition:
    transform var(--dur-card) var(--ease-out-expo),
    box-shadow var(--dur-card) ease,
    border-color var(--dur-card) ease;
}

.ds-glass:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card-hover);
}

/* Diagonal sheen overlay that sells the "glass" read */
.ds-glass-shine::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.04) 100%
  );
}