/* ================================================================
   Precision Harvest Design System — style.css
   Design North Star: "The Aerial Observer"
   Ref: DESIGN.md
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------------------------------- */
:root {
  --color-primary:               #012d1d;
  --color-primary-container:     #1b4332;
  --color-secondary:             #006399;
  --color-accent-orange:         #ff6d00;
  --color-on-surface:            #191c1d; /* Never pure black — DESIGN §6 */
  --color-on-surface-variant:    #414844;
  --color-surface:               #f8f9fa;
  --color-surface-container:     #edeeef;
  --color-surface-container-low: #f3f4f5;
  --color-outline-variant:       #c1c8c2;

  /* Elevation — Ambient Shadows (DESIGN §4) */
  --shadow-ambient:    0 20px 40px rgba(25, 28, 29, 0.06);
  --shadow-float:      0 10px 25px -5px rgba(25, 28, 29, 0.10);
  --shadow-cta:        0 10px 25px -5px rgba(255, 109, 0, 0.4);
  --shadow-cta-hover:  0 15px 30px -5px rgba(255, 109, 0, 0.6);

  /* Transitions (DESIGN §5 — 200ms ease-out) */
  --transition-base: 200ms ease-out;
}

/* ----------------------------------------------------------------
   Material Symbols
   ---------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ----------------------------------------------------------------
   Glass Card
   DESIGN §2 "Glass & Gradient Rule":
   surface-container-lowest @ 70% opacity + backdrop-blur(12px)
   ---------------------------------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-ambient);
  transition:
    box-shadow     var(--transition-base),
    border-color   var(--transition-base),
    background-color var(--transition-base);
}

.glass-card:hover {
  box-shadow: var(--shadow-float);
}

/* ----------------------------------------------------------------
   Tech-Grid Dot Pattern
   DESIGN §5 "The Tech Grid":
   outline-variant @ 10% opacity, 24px repeat
   ---------------------------------------------------------------- */
.tech-grid {
  background-image: radial-gradient(
    circle,
    rgba(193, 200, 194, 0.10) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

/* Slightly more visible variant for the CTA section overlay */
.tech-grid-cta {
  background-image: radial-gradient(
    circle,
    rgba(193, 200, 194, 0.40) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

/* ----------------------------------------------------------------
   CTA Buttons
   DESIGN §5 "High-Contrast Precision"
   DESIGN §2 "Glass & Gradient Rule": 135° carbon-fiber sheen
   ---------------------------------------------------------------- */
.cta-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary)           0%,
    var(--color-primary-container) 100%
  );
  color: #ffffff;
  transition:
    background  var(--transition-base),
    transform   var(--transition-base),
    box-shadow  var(--transition-base);
}

.cta-primary:hover {
  background: linear-gradient(
    135deg,
    var(--color-primary-container) 0%,
    var(--color-primary)           100%
  );
  transform: translateY(-2px);
}

/* Orange CTA Pop */
.cta-pop {
  box-shadow: var(--shadow-cta);
  transition:
    transform  var(--transition-base),
    box-shadow var(--transition-base);
}

.cta-pop:hover {
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   Program / Session Cards
   DESIGN §5 "Cards & Lists":
   No divider lines — background shift on hover to surface-container-high
   ---------------------------------------------------------------- */
.program-card {
  transition:
    background-color var(--transition-base),
    transform        var(--transition-base),
    box-shadow       var(--transition-base);
}

.program-card:hover {
  background-color: #e7e8e9; /* surface-container-high */
  transform: translateX(0.5rem);
  box-shadow: var(--shadow-ambient);
}

/* ----------------------------------------------------------------
   Ghost Border Fallback
   DESIGN §4: outline-variant @ 15% opacity — "felt, not seen"
   ---------------------------------------------------------------- */
.ghost-border {
  border: 1px solid rgba(193, 200, 194, 0.15);
}

/* ----------------------------------------------------------------
   Overline Labels
   DESIGN §3 "Hierarchy as Identity":
   label-md: uppercase, 0.1em letter-spacing, Public Sans
   ---------------------------------------------------------------- */
.overline {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Public Sans', sans-serif;
  color: var(--color-secondary);
}

/* ----------------------------------------------------------------
   Data Chips
   DESIGN §5 "Data Chips":
   surface-container-highest bg + on-surface-variant text + full radius
   ---------------------------------------------------------------- */
.data-chip {
  background-color: #e1e3e4; /* surface-container-highest */
  color: var(--color-on-surface-variant);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-block;
}

/* ----------------------------------------------------------------
   Flight Path Accent Lines
   DESIGN §7 "Signature Accents":
   0.5px hairlines, secondary @ 30% opacity, diagonal
   ---------------------------------------------------------------- */
.flight-path-before::before {
  content: '';
  display: block;
  width: 120px;
  height: 0.5px;
  background-color: rgba(0, 99, 153, 0.30); /* secondary @ 30% */
  transform: rotate(-35deg);
  transform-origin: left center;
  margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------
   Input Fields
   DESIGN §5 "Input Fields":
   No background fill, bottom-only ghost border, focus → secondary
   ---------------------------------------------------------------- */
.input-ghost {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.875rem;
  color: var(--color-on-surface);
  outline: none;
  width: 100%;
  transition: border-color var(--transition-base);
}

.input-ghost:focus {
  border-bottom: 2px solid var(--color-secondary);
}

.input-label {
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  margin-bottom: 0.25rem;
}

/* ----------------------------------------------------------------
   Floating Modal Shadow
   DESIGN §4 "Ambient Shadows": extra-diffused
   ---------------------------------------------------------------- */
.modal-float {
  box-shadow: 0 20px 40px rgba(25, 28, 29, 0.06);
}