/*
 * Lab Instrumentation Design System — Token Layer
 *
 * Source of truth for the lab theme palette, typography, and decorative primitives.
 * light-theme.css remaps its existing variable names to these tokens so that
 * every existing template inherits the new aesthetic via variable indirection.
 *
 * PR-04 of the marketing-product gap roadmap.
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,300;1,9..144,500&family=JetBrains+Mono:wght@300;400;500;700&display=swap");

:root {
  /* ── Core palette ── */
  --ink:           #0c0b09;
  --ink-2:         #131210;
  --ink-3:         #1c1a16;
  --paper:         #efe9dc;
  --paper-dim:     #b6ad99;
  --paper-faint:   #6f6855;
  --rule:          #2a261f;
  --rule-bright:   #4a4334;

  /* ── Aliases (used in older templates) ── */
  --bone:          var(--paper);
  --bone-dim:      var(--paper-dim);
  --bone-faint:    var(--paper-faint);
  --ink-4:         var(--rule);

  /* ── Accent palette ── */
  --amber:         #ff9a1f;
  --amber-hot:     #ffb24a;
  --amber-dark:    #cc7a00;
  --amber-dim:     rgba(255, 154, 31, 0.25);
  --signal:        #b8ff5a;
  --acid:          var(--signal);
  --danger:        #ff4d3a;
  --alert:         var(--danger);
  --crimson:       var(--danger);
  --violet:        #a78bfa;

  /* ── Status palette (consumed by status-pill component, PR-05) ── */
  --status-testing:  var(--signal);
  --status-paused:   var(--amber);
  --status-winner:   var(--amber-hot);
  --status-killed:   var(--danger);
  --status-pending:  var(--paper-dim);
  --status-complete: var(--signal);

  /* ── Typography ── */
  --font-display:  'Fraunces', 'Times New Roman', serif;
  --font-body:     'JetBrains Mono', ui-monospace, monospace;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* ── Type scale ── */
  --type-display:   700 clamp(40px, 5.6vw, 72px)/0.94 var(--font-display);
  --type-headline:  500 clamp(24px, 3vw, 36px)/1.1 var(--font-display);
  --type-body:      400 14px/1.65 var(--font-body);
  --type-mono-md:   400 13px/1.6 var(--font-mono);
  --type-mono-sm:   400 11px/1.5 var(--font-mono);
  --type-eyebrow:   500 10.5px/1.3 var(--font-mono);

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Radius (lab aesthetic prefers sharp) ── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;

  /* ── Shadows ── */
  --shadow-deep:       0 4px 24px rgba(0,0,0,0.4);
  --shadow-inset-deep: inset 0 0 60px rgba(0,0,0,0.7);
  --shadow-amber-glow: 0 0 18px rgba(255,154,31,0.4);
}

/* ── Text selection — readable on dark backgrounds ── */
::selection {
  background: rgba(255, 154, 31, 0.35);
  color: var(--paper);
}
::-moz-selection {
  background: rgba(255, 154, 31, 0.35);
  color: var(--paper);
}
/* Light-bg contexts (ad preview cards, form inputs) */
.ad-preview-card ::selection,
.card ::selection {
  background: rgba(255, 154, 31, 0.3);
  color: #1a1816;
}

/* ── Global form element defaults (catch Tailwind inputs that lack explicit bg/color) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),
textarea,
select {
  background-color: var(--ink-2);
  color: var(--paper);
  border-color: var(--rule);
}
input::placeholder,
textarea::placeholder {
  color: var(--paper-faint);
}
option {
  background-color: var(--ink-2);
  color: var(--paper);
}

/* ── Film grain overlay ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* ── Hairline grid background ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(239,233,220,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(239,233,220,0.02) 1px, transparent 1px);
  background-size: 96px 96px;
}