/* ============================================================
   OpsOlive — style.css
   Design tokens + component styles
   ============================================================ */

/* ------------------------------------------------------------
   1. Design Tokens
   ------------------------------------------------------------ */
:root {
  /* Brand scale — Sage Olive, hue 142° */
  --brand-50:  oklch(0.96 0.018 142);
  --brand-100: oklch(0.92 0.038 142);
  --brand-200: oklch(0.85 0.058 142);
  --brand-300: oklch(0.74 0.075 142);
  --brand-400: oklch(0.63 0.085 142);
  --brand-500: oklch(0.53 0.090 142);
  --brand-600: oklch(0.45 0.082 142);
  --brand-700: oklch(0.38 0.068 142);
  --brand-800: oklch(0.30 0.052 142);
  --brand-900: oklch(0.22 0.036 142);
  --brand:        var(--brand-500);
  --brand-hover:  var(--brand-600);
  --brand-press:  var(--brand-700);
  --brand-soft:   var(--brand-50);
  --brand-soft-2: var(--brand-100);

  /* Accent scale — Warm Coral, hue 35° */
  --accent-50:  oklch(0.96 0.020 35);
  --accent-100: oklch(0.93 0.045 35);
  --accent-200: oklch(0.88 0.075 35);
  --accent-300: oklch(0.80 0.120 35);
  --accent-400: oklch(0.70 0.145 35);
  --accent-500: oklch(0.63 0.140 35);
  --accent-600: oklch(0.55 0.125 35);
  --accent-700: oklch(0.46 0.105 35);
  --accent-800: oklch(0.37 0.082 35);
  --accent-900: oklch(0.27 0.058 35);

  /* Semantic foreground */
  --fg-1: oklch(0.23 0.010 80);
  --fg-2: oklch(0.44 0.011 80);
  --fg-3: oklch(0.63 0.010 80);
  --fg-inv: oklch(1 0 0);

  /* Semantic background */
  --bg-1: oklch(0.998 0.002 65);
  --bg-2: oklch(0.985 0.005 65);
  --bg-3: oklch(0.97  0.007 65);
  --bg-4: oklch(0.94  0.009 60);
  --bg-inv: oklch(0.20 0.014 145);

  /* Lines / borders */
  --line-1: oklch(0.93 0.008 60);
  --line-2: oklch(0.88 0.010 60);
  --line-3: oklch(0.78 0.011 60);

  /* Shadows */
  --shadow-xs: 0 1px 2px oklch(0.24 0.012 135 / 0.04);
  --shadow-sm: 0 1px 2px oklch(0.24 0.012 135 / 0.05), 0 1px 3px oklch(0.24 0.012 135 / 0.06);
  --shadow-md: 0 2px 4px oklch(0.24 0.012 135 / 0.05), 0 4px 12px oklch(0.24 0.012 135 / 0.08);
  --shadow-lg: 0 4px 8px oklch(0.24 0.012 135 / 0.06), 0 12px 32px oklch(0.24 0.012 135 / 0.12);
  --shadow-xl: 0 8px 16px oklch(0.24 0.012 135 / 0.08), 0 24px 56px oklch(0.24 0.012 135 / 0.16);

  /* Focus ring */
  --focus-ring: 0 0 0 3px oklch(0.53 0.090 142 / 0.30);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  /* Spacing — 4pt grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
}

/* ------------------------------------------------------------
   2. Base Reset
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

[hidden] {
  display: none !important;
}

body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

h1, h2, h3 {
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

a {
  color: var(--brand-500);
  text-decoration: none;
}

a:hover {
  color: var(--brand-600);
}

a:focus-visible,
.brand-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------ */
.container {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* ------------------------------------------------------------
   4. Header
   ------------------------------------------------------------ */
header {
  padding: var(--sp-6) 0;
}

.brand-link {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.brand-link .olive {
  color: var(--accent-600);
}

/* ------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------ */
section.hero {
  text-align: center;
  padding: var(--sp-12) 0;
}

.hero h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--fg-2);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   6. Signup Form
   ------------------------------------------------------------ */
.form {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}

.form input[type="email"] {
  flex: 1 1 260px;
  max-width: 320px;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  outline: none;
}

.form input[type="email"]:focus {
  border-color: var(--brand-400);
  box-shadow: var(--focus-ring);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form button {
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand-600);
  color: white;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.form button:hover {
  background: var(--brand-hover);
}

.form button:active {
  background: var(--brand-press);
}

.form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   7. Success Message
   ------------------------------------------------------------ */
.success-msg {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-soft);
  color: var(--brand-700);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 500;
  display: inline-block;
}

/* ------------------------------------------------------------
   8. Features Grid
   ------------------------------------------------------------ */

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.features {
  padding: var(--sp-12) 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.feature-card {
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.feature-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  color: var(--fg-1);
}

.feature-card p {
  font-size: var(--text-base);
  color: var(--fg-2);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------ */
footer {
  padding: var(--sp-8) 0 var(--sp-10);
  text-align: center;
  color: var(--fg-2);
  font-size: var(--text-sm);
  border-top: 1px solid var(--line-1);
}

/* ------------------------------------------------------------
   10. Responsive — 640px breakpoint
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .hero h1 {
    font-size: var(--text-3xl);
  }

  .form {
    flex-direction: column;
    align-items: stretch;
  }

  .form input[type="email"] {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
}