/*
 * TestKinks — Design System Foundations
 *
 * Semantic typography classes, surface/elevation utilities, container &
 * grid system, shared CTA/button states, and form validation treatment.
 *
 * Depends on: design tokens in style.css :root
 *
 * DES-CX-001 · DES-CX-002
 */

/* ================================================================
   TYPOGRAPHY SYSTEM
   Three semantic roles: Authority · Precision · Data
   ================================================================ */

/*
 * .tk-type-authority — Playfair Display
 * Use for: page headings, gate titles, archetype names, hero copy
 */
.tk-type-authority,
.tk-type-authority--xl,
.tk-type-authority--2xl,
.tk-type-authority--3xl,
.tk-type-authority--4xl {
  font-family: var(--tk-font-display);
  font-weight: var(--tk-weight-bold);
  line-height: var(--tk-leading-tight);
  letter-spacing: var(--tk-tracking-tight);
  color: var(--tk-ink-100);
}

.tk-type-authority         { font-size: var(--tk-fluid-xl); }
.tk-type-authority--xl     { font-size: var(--tk-fluid-xl); }
.tk-type-authority--2xl    { font-size: var(--tk-fluid-2xl); }
.tk-type-authority--3xl    { font-size: var(--tk-fluid-3xl); }
.tk-type-authority--4xl    { font-size: var(--tk-fluid-4xl); }

/* Italic treatment for subheadings */
.tk-type-authority em,
.tk-type-authority i {
  font-style: italic;
  color: var(--tk-gold-400);
}

/*
 * .tk-type-precision — Inter
 * Use for: body copy, nav labels, descriptions, card text
 */
.tk-type-precision,
.tk-type-precision--sm,
.tk-type-precision--md,
.tk-type-precision--lg {
  font-family: var(--tk-font-body);
  font-weight: var(--tk-weight-regular);
  line-height: var(--tk-leading-normal);
  letter-spacing: var(--tk-tracking-normal);
  color: var(--tk-ink-300);
}

.tk-type-precision--sm { font-size: var(--tk-fluid-sm); }
.tk-type-precision     { font-size: var(--tk-fluid-md); }
.tk-type-precision--md { font-size: var(--tk-fluid-md); }
.tk-type-precision--lg { font-size: var(--tk-fluid-lg); }

/*
 * .tk-type-data — JetBrains Mono
 * Use for: score labels, badge text, system status, loading states,
 *          quiz option identifiers, archetype data points
 */
.tk-type-data,
.tk-type-data--xs,
.tk-type-data--sm,
.tk-type-data--md {
  font-family: var(--tk-font-mono);
  font-weight: var(--tk-weight-medium);
  line-height: var(--tk-leading-snug);
  letter-spacing: var(--tk-tracking-wide);
  color: var(--precision-silver);
}

.tk-type-data--xs { font-size: var(--tk-fluid-xs); }
.tk-type-data     { font-size: var(--tk-fluid-sm); }
.tk-type-data--sm { font-size: var(--tk-fluid-sm); }
.tk-type-data--md { font-size: var(--tk-fluid-md); }

/* Accent variant: electric-pink data label */
.tk-type-data--accent {
  color: var(--electric-pink);
}

/* ── Utility overrides ─────────────────────────────────────────── */
.tk-text-muted   { color: var(--tk-ink-500); }
.tk-text-silver  { color: var(--precision-silver); }
.tk-text-lavender{ color: var(--muted-lavender); }
.tk-text-pink    { color: var(--electric-pink); }
.tk-text-gold    { color: var(--tk-gold-400); }
.tk-text-center  { text-align: center; }
.tk-text-upper   { text-transform: uppercase; letter-spacing: var(--tk-tracking-widest); }
.tk-text-mono    { font-family: var(--tk-font-mono); }

/* ================================================================
   CONTAINER & GRID SYSTEM  (DES-CX-002)
   ================================================================ */

/*
 * .tk-container — standard 1200px centred wrapper
 * .tk-container--narrow — reading width (800px)
 * .tk-container--quiz   — quiz reading mode (768px)
 * .tk-container--wide   — wide layout (1440px)
 */
.tk-container,
.tk-container--narrow,
.tk-container--quiz,
.tk-container--wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tk-space-5);
  padding-right: var(--tk-space-5);
}

.tk-container        { max-width: var(--tk-max-w-layout); }
.tk-container--narrow{ max-width: var(--tk-max-w-content); }
.tk-container--quiz  { max-width: var(--tk-max-w-quiz); }
.tk-container--wide  { max-width: var(--tk-max-w-wide); }

@media (max-width: 600px) {
  .tk-container,
  .tk-container--narrow,
  .tk-container--quiz,
  .tk-container--wide {
    padding-left: var(--tk-space-4);
    padding-right: var(--tk-space-4);
  }
}

/*
 * 12-column desktop grid → 4-column mobile
 * Uses CSS Grid with named line system.
 */
.tk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--tk-space-5);
}

@media (max-width: 768px) {
  .tk-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--tk-space-4);
  }
}

/* Span helpers */
.tk-col-1  { grid-column: span 1; }
.tk-col-2  { grid-column: span 2; }
.tk-col-3  { grid-column: span 3; }
.tk-col-4  { grid-column: span 4; }
.tk-col-5  { grid-column: span 5; }
.tk-col-6  { grid-column: span 6; }
.tk-col-7  { grid-column: span 7; }
.tk-col-8  { grid-column: span 8; }
.tk-col-9  { grid-column: span 9; }
.tk-col-10 { grid-column: span 10; }
.tk-col-11 { grid-column: span 11; }
.tk-col-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .tk-col-1, .tk-col-2, .tk-col-3 { grid-column: span 2; }
  .tk-col-4, .tk-col-5, .tk-col-6 { grid-column: span 4; }
  .tk-col-7, .tk-col-8, .tk-col-9,
  .tk-col-10,.tk-col-11,.tk-col-12 { grid-column: span 4; }
}

/* ================================================================
   SURFACE / ELEVATION SYSTEM  (DES-CX-001 / DES-CX-002)
   ================================================================ */

/*
 * Level 0 — base page background (no card needed, just the body BG)
 * Level 1 — primary card/panel surface
 * Level 2 — interactive card, hover lifted surface
 * Level 3 — modal / overlay surface
 * Frost    — frosted glass (for header/footer — also available here)
 */
.tk-surface-0 {
  background-color: var(--tk-elev-0);
  border-radius: var(--tk-radius-md);
}

.tk-surface-1 {
  background-color: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-shadow-soft);
}

.tk-surface-2 {
  background-color: var(--tk-elev-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-shadow-deep);
}

.tk-surface-3 {
  background-color: var(--tk-elev-3);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-deep);
}

.tk-surface-frost {
  background: var(--tk-frosted-bg);
  -webkit-backdrop-filter: blur(var(--tk-frosted-blur));
          backdrop-filter: blur(var(--tk-frosted-blur));
  border: var(--tk-frosted-border);
  border-radius: var(--tk-radius-md);
}

@supports not (backdrop-filter: blur(1px)) {
  .tk-surface-frost {
    background: var(--tk-elev-2);
  }
}

/* Texture overlay hook — activate by setting --tk-texture-* variables */
.tk-texture-layer {
  isolation: isolate;
}

/* Overlay frame keeps positioning off the layout wrapper to avoid mobile offsets. */
.tk-texture-layer__overlay {
  position: relative;
  isolation: isolate;
  width: 100%;
}

.tk-texture-layer__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--tk-texture-opacity, 0.08);
  background-image:
    var(--tk-texture-silk, none),
    var(--tk-texture-leather, none),
    var(--tk-texture-ornament, none);
  background-size: cover;
  background-blend-mode: var(--tk-texture-blend, overlay);
  border-radius: inherit;
}

.tk-texture-layer__overlay > * { position: relative; z-index: 1; }

/* ── Card interactive state ────────────────────────────────────── */
.tk-surface-interactive {
  background-color: var(--tk-elev-1);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-shadow-soft);
  transition:
    transform       var(--tk-duration-md)   var(--tk-ease-out),
    box-shadow      var(--tk-duration-md)   var(--tk-ease-out),
    border-color    var(--tk-duration-md)   var(--tk-ease-out),
    background-color var(--tk-duration-md)  var(--tk-ease-out);
  cursor: pointer;
}

.tk-surface-interactive:hover,
.tk-surface-interactive:focus-within {
  background-color: var(--tk-elev-2);
  border-color: rgba(var(--electric-pink-rgb), 0.20);
  box-shadow: var(--tk-shadow-deep), var(--tk-glow-pink);
  transform: translateY(-2px);
}

.tk-surface-interactive:active {
  transform: translateY(0);
  box-shadow: var(--tk-shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .tk-surface-interactive {
    transition: background-color var(--tk-duration-md), border-color var(--tk-duration-md);
  }
  .tk-surface-interactive:hover,
  .tk-surface-interactive:focus-within {
    transform: none;
  }
}

/* ================================================================
   BUTTON / CTA SYSTEM  (DES-CX-002)
   ================================================================ */

/* Base reset shared by all button variants */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-2);
  border: none;
  cursor: pointer;
  font-family: var(--tk-font-body);
  font-weight: var(--tk-weight-semibold);
  letter-spacing: var(--tk-tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--tk-radius-sm);
  transition:
    background    var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow    var(--tk-duration-fast) var(--tk-ease-out),
    color         var(--tk-duration-fast) var(--tk-ease-out),
    border-color  var(--tk-duration-fast) var(--tk-ease-out),
    transform     var(--tk-duration-fast) var(--tk-ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Size variants */
.tk-btn--sm  { font-size: var(--tk-font-size-xs); padding: var(--tk-space-2) var(--tk-space-4); min-height: 36px; }
.tk-btn--md  { font-size: var(--tk-font-size-sm); padding: var(--tk-space-3) var(--tk-space-5); min-height: 44px; }
.tk-btn--lg  { font-size: var(--tk-font-size-md); padding: var(--tk-space-4) var(--tk-space-7); min-height: 52px; }
.tk-btn--full{ width: 100%; }

/* Primary CTA — electric pink fill */
.tk-btn--primary {
  background: var(--electric-pink);
  color: #fff;
  border: 2px solid transparent;
}

.tk-btn--primary:hover {
  background: hsl(335, 100%, 55%);
  box-shadow: var(--tk-glow-pink);
}

.tk-btn--primary:active {
  background: hsl(335, 100%, 50%);
  transform: scale(0.98);
}

.tk-btn--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--electric-pink-rgb), 0.45);
}

.tk-btn--primary:disabled,
.tk-btn--primary[aria-disabled="true"] {
  background: var(--tk-obsidian-600);
  color: var(--tk-ink-500);
  box-shadow: none;
  cursor: not-allowed;
}

/* Secondary CTA — outlined silver */
.tk-btn--secondary {
  background: transparent;
  color: var(--precision-silver);
  border: 1.5px solid rgba(210, 210, 220, 0.25);
}

.tk-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(210, 210, 220, 0.50);
  color: var(--tk-ink-100);
}

.tk-btn--secondary:active {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(0.98);
}

.tk-btn--secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--precision-silver);
}

.tk-btn--secondary:disabled,
.tk-btn--secondary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ghost CTA — text-only with underline reveal */
.tk-btn--ghost {
  background: transparent;
  color: var(--tk-ink-500);
  border: 2px solid transparent;
  padding-left: 0;
  padding-right: 0;
}

.tk-btn--ghost:hover {
  color: var(--tk-ink-100);
  text-decoration: underline;
  text-decoration-color: var(--electric-pink);
  text-underline-offset: 3px;
}

.tk-btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--electric-pink);
  border-radius: var(--tk-radius-xs);
  padding-left: var(--tk-space-2);
  padding-right: var(--tk-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .tk-btn {
    transition: background var(--tk-duration-fast), color var(--tk-duration-fast), border-color var(--tk-duration-fast);
  }
  .tk-btn:active { transform: none; }
}

/* ================================================================
   FORM VALIDATION  (DES-CX-002)
   Warm amber instead of aggressive red
   ================================================================ */

/* Base input shell */
.tk-input,
.tk-textarea,
.tk-select {
  width: 100%;
  background: var(--tk-elev-1);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-ink-100);
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-md);
  padding: var(--tk-space-3) var(--tk-space-4);
  transition:
    border-color var(--tk-duration-fast) var(--tk-ease-out),
    box-shadow   var(--tk-duration-fast) var(--tk-ease-out);
  appearance: none;
}

.tk-input::placeholder,
.tk-textarea::placeholder {
  color: var(--tk-ink-500);
}

.tk-input:focus,
.tk-textarea:focus,
.tk-select:focus {
  outline: none;
  border-color: rgba(var(--electric-pink-rgb), 0.50);
  box-shadow: 0 0 0 3px rgba(var(--electric-pink-rgb), 0.15);
}

/* ── Validation states ─────────────────────────────────────────── */
/* --tk-amber-* tokens are defined in style.css :root */

.tk-input--invalid,
.tk-textarea--invalid,
.tk-select--invalid,
[aria-invalid="true"] {
  border-color: rgba(var(--tk-amber-rgb), 0.60);
  box-shadow: 0 0 0 3px rgba(var(--tk-amber-rgb), 0.15);
}

.tk-field-error {
  display: block;
  margin-top: var(--tk-space-2);
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-xs);
  font-weight: var(--tk-weight-medium);
  color: var(--tk-amber-400);
  line-height: var(--tk-leading-snug);
}

/* Success state — muted green */
.tk-input--valid,
.tk-textarea--valid {
  border-color: rgba(72, 200, 140, 0.45);
  box-shadow: 0 0 0 3px rgba(72, 200, 140, 0.10);
}

.tk-field-success {
  display: block;
  margin-top: var(--tk-space-2);
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-xs);
  color: hsl(150, 55%, 60%);
}

/* Label */
.tk-label {
  display: block;
  font-family: var(--tk-font-body);
  font-size: var(--tk-font-size-sm);
  font-weight: var(--tk-weight-medium);
  color: var(--tk-ink-300);
  margin-bottom: var(--tk-space-2);
  letter-spacing: var(--tk-tracking-normal);
}

.tk-label--required::after {
  content: " *";
  color: var(--electric-pink);
}

/* Field group wrapper */
.tk-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--tk-space-5);
}