/**
 * TrustPadel — Court Light 2026
 * Sports-lifestyle premium: forest ink + electric mint on warm-cool chalk.
 * Spec: docs/DESIGN.md
 *
 * Fonts: Syne (brand/display) + Plus Jakarta Sans (UI)
 */

:root {
  /* Color — brand & surfaces */
  --tp-court: #072b22;
  --tp-court-mid: #0f4638;
  --tp-court-bright: #165a48;
  --tp-lime: #b8f24a;
  --tp-lime-deep: #97d428;
  --tp-chalk: #f1f4f2;
  --tp-white: #ffffff;
  --tp-ink: #061913;
  --tp-mist: #d4dfd9;
  --tp-success: #1a8f5c;
  --tp-danger: #d64545;
  --tp-warning: #e6a317;

  /* Soft status washes (calendar cells) */
  --tp-wash-free: #e6f5ea;
  --tp-wash-free-ink: #072b22;
  --tp-wash-booked: #fce8e6;
  --tp-wash-booked-ink: #8b2e2a;
  --tp-wash-blocked: #eef1ef;
  --tp-wash-blocked-ink: #5a6b63;

  /* Semantic aliases */
  --tp-color-bg: var(--tp-chalk);
  --tp-color-surface: var(--tp-white);
  --tp-color-text: var(--tp-ink);
  --tp-color-text-muted: color-mix(in srgb, var(--tp-ink) 52%, #7a8f86);
  /* Texto secundario / terciario — ambos ≥ 4.5:1 sobre chalk (WCAG AA) */
  --tp-color-text-secondary: #41564f; /* 7.1:1 */
  --tp-color-text-subtle: #5a6d66; /* 5.0:1 — mínimo para texto */
  --tp-color-icon-off: #c5cec9; /* solo iconos inactivos, nunca texto */
  --tp-star: #c9a227;
  --tp-warning-ink: #8a5a00; /* texto de aviso sobre blanco (5.9:1) */
  --tp-color-border: var(--tp-mist);
  --tp-color-primary: var(--tp-lime);
  --tp-color-primary-pressed: var(--tp-lime-deep);
  --tp-color-on-primary: var(--tp-ink);
  --tp-color-brand: var(--tp-court);
  --tp-color-on-brand: var(--tp-chalk);
  --tp-color-focus: var(--tp-court);

  /* Atmosphere — warm-cool chalk, not flat gray */
  --tp-gradient-hero: linear-gradient(
    158deg,
    #072b22 0%,
    #0f4638 44%,
    #165a48 100%
  );
  --tp-gradient-shell:
    radial-gradient(
      ellipse 95% 60% at 88% -12%,
      rgba(7, 43, 34, 0.055),
      transparent 58%
    ),
    radial-gradient(
      ellipse 75% 55% at -8% 108%,
      rgba(184, 242, 74, 0.09),
      transparent 52%
    ),
    radial-gradient(
      ellipse 50% 40% at 50% 50%,
      rgba(255, 255, 255, 0.45),
      transparent 70%
    ),
    var(--tp-chalk);

  /* Typography — Syne brand + Plus Jakarta Sans UI */
  --tp-font-display: "Syne", "Segoe UI", sans-serif;
  --tp-font-ui: "Plus Jakarta Sans", "Segoe UI", sans-serif;

  --tp-text-hero: 3rem; /* 48 */
  --tp-text-title: 1.875rem; /* 30 */
  --tp-text-heading: 1.25rem; /* 20 */
  --tp-text-body: 1.0625rem; /* 17 */
  --tp-text-label: 0.875rem; /* 14 */
  --tp-text-caption: 0.8125rem; /* 13 */

  --tp-leading-tight: 1.08;
  --tp-leading-snug: 1.25;
  --tp-leading-body: 1.5;

  --tp-tracking-brand: -0.04em;
  --tp-tracking-title: -0.03em;
  --tp-tracking-body: -0.01em;

  --tp-weight-regular: 400;
  --tp-weight-medium: 500;
  --tp-weight-semibold: 600;
  --tp-weight-bold: 700;
  --tp-weight-extrabold: 800;

  /* Spacing */
  --tp-space-1: 0.25rem;
  --tp-space-2: 0.5rem;
  --tp-space-3: 1rem;
  --tp-space-4: 1.5rem;
  --tp-space-5: 2rem;
  --tp-space-6: 3rem;

  --tp-safe-x: 1.5rem;
  --tp-tap-min: 3.25rem; /* 52 */
  --tp-cta-height: 3.5rem; /* 56 */

  /* Radii — soft 20–28px */
  --tp-radius-sm: 0.875rem; /* 14 */
  --tp-radius-md: 1.25rem; /* 20 */
  --tp-radius-lg: 1.5rem; /* 24 */
  --tp-radius-xl: 1.75rem; /* 28 */
  --tp-radius-pill: 999px;

  /* Single soft shadow layer */
  --tp-shadow-soft: 0 4px 28px rgba(6, 25, 19, 0.06);
  --tp-shadow-lift: 0 10px 36px rgba(6, 25, 19, 0.1);
  --tp-border-width: 1px;

  /* Focus ring */
  --tp-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tp-court) 18%, transparent);

  /* Motion — calm 180–280ms */
  --tp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tp-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --tp-duration-press: 160ms;
  --tp-duration-select: 220ms;
  --tp-duration-page: 280ms;
  --tp-duration-success: 260ms;
  --tp-press-scale: 0.97;
}

.tp-shell {
  min-height: 100%;
  background: var(--tp-gradient-shell);
  color: var(--tp-color-text);
  font-family: var(--tp-font-ui);
  font-size: var(--tp-text-body);
  line-height: var(--tp-leading-body);
  font-weight: var(--tp-weight-regular);
  letter-spacing: var(--tp-tracking-body);
}

.tp-display {
  font-family: var(--tp-font-display);
  font-weight: var(--tp-weight-bold);
  line-height: var(--tp-leading-tight);
  letter-spacing: var(--tp-tracking-brand);
  color: var(--tp-color-brand);
}

.tp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tp-cta-height);
  padding: 0 var(--tp-space-5);
  border: none;
  border-radius: var(--tp-radius-lg);
  background: var(--tp-color-primary);
  color: var(--tp-color-on-primary);
  font-family: var(--tp-font-ui);
  font-size: 1.0625rem;
  font-weight: var(--tp-weight-semibold);
  letter-spacing: -0.015em;
  cursor: pointer;
  box-shadow: var(--tp-shadow-soft);
  transition:
    transform var(--tp-duration-press) var(--tp-ease-spring),
    background-color var(--tp-duration-select) var(--tp-ease-out),
    box-shadow var(--tp-duration-select) var(--tp-ease-out);
}

.tp-btn-primary:hover:not(:disabled) {
  background: var(--tp-color-primary-pressed);
  box-shadow: var(--tp-shadow-lift);
}

.tp-btn-primary:active:not(:disabled) {
  transform: scale(var(--tp-press-scale));
}

.tp-btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--tp-shadow-soft), var(--tp-focus-ring);
}

.tp-btn-primary:disabled {
  opacity: 0.65;
  cursor: wait;
}

.tp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tp-cta-height);
  padding: 0 var(--tp-space-4);
  border: 1.5px solid color-mix(in srgb, var(--tp-court) 22%, var(--tp-mist));
  border-radius: var(--tp-radius-lg);
  background: color-mix(in srgb, var(--tp-white) 88%, transparent);
  color: var(--tp-color-brand);
  font-family: var(--tp-font-ui);
  font-size: var(--tp-text-body);
  font-weight: var(--tp-weight-semibold);
  letter-spacing: -0.015em;
  cursor: pointer;
  transition:
    transform var(--tp-duration-press) var(--tp-ease-spring),
    background-color var(--tp-duration-select) var(--tp-ease-out),
    border-color var(--tp-duration-select) var(--tp-ease-out),
    box-shadow var(--tp-duration-select) var(--tp-ease-out);
}

.tp-btn-secondary:hover:not(:disabled) {
  background: var(--tp-white);
  border-color: color-mix(in srgb, var(--tp-court) 40%, var(--tp-mist));
  box-shadow: var(--tp-shadow-soft);
}

.tp-btn-secondary:active:not(:disabled) {
  transform: scale(var(--tp-press-scale));
}

.tp-btn-secondary:focus-visible {
  outline: none;
  box-shadow: var(--tp-focus-ring);
}