/*!
 * LAKA Design System — laka.css v1.0.0
 * Ryan Perez / LAKA design system, guide v4.3 · WCAG 2.2 AA
 * https://designsystem.bowtiekreative.com
 *
 * Embed:
 *   <link rel="stylesheet" href="https://designsystem.bowtiekreative.com/dist/laka.css">
 *
 * Everything is namespaced: custom properties as --rp-* / --space-* / --radius-*,
 * classes as .laka-*. Safe to drop into an existing page.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* color */
  --rp-canvas: #07090D;
  --rp-surface: #0B0E14;
  --rp-raised: #1A1D24;
  --rp-heading: #F5F7FA;
  --rp-body: #C5C7CE;
  --rp-accent: #3F6EE9;
  --rp-accent-hover: #5A83EE;
  --rp-accent-press: #3459C4;
  --rp-success: #3FA46A;
  --rp-warning: #C98A2E;
  --rp-danger: #D8574F;
  --rp-hairline: rgba(245, 247, 250, 0.15);
  --rp-muted-text-floor: rgba(245, 247, 250, 0.55);
  --rp-light-canvas: #EDEFF4;
  --rp-light-ink: #10131A;

  /* space scale (1–10) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 56px; --space-10: 80px;

  /* radius */
  --radius-control: 8px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-media: 32px;
  --radius-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration: 600ms;
  --motion-rise: 24px;
  --motion-stagger: 90ms;

  /* focus + targets */
  --focus-ring: 2px;
  --focus-offset: 3px;
  --target-preferred: 44px;
  --target-minimum: 24px;
}

/* ------------------------------------------------------------ foundation */

.laka,
.laka-scope {
  background: var(--rp-canvas);
  color: var(--rp-body);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.laka *,
.laka *::before,
.laka *::after,
.laka-scope *,
.laka-scope *::before,
.laka-scope *::after { box-sizing: border-box; }

.laka :focus-visible,
.laka-scope :focus-visible,
.laka-btn:focus-visible,
.laka-input:focus-visible {
  outline: var(--focus-ring) solid var(--rp-accent);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-control);
}

/* ------------------------------------------------------------ typography */

.laka-display {
  margin: 0;
  color: var(--rp-heading);
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1.02;
  max-width: 16ch;
  text-wrap: pretty;
}

.laka-h3 {
  margin: 0;
  color: var(--rp-heading);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.laka-h4 {
  margin: 0;
  color: var(--rp-heading);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.laka-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-accent);
}

.laka-lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--rp-body);
  max-width: 68ch;
}

.laka-body { font-size: 16px; line-height: 1.7; color: var(--rp-body); max-width: 75ch; }

.laka-micro {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-muted-text-floor);
}

.laka a, .laka-link { color: var(--rp-heading); text-decoration: underline; text-underline-offset: 3px; }
.laka a:hover, .laka-link:hover { color: var(--rp-accent-hover); }

/* --------------------------------------------------------------- buttons */

.laka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--target-preferred);
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.laka-btn--primary { background: var(--rp-accent); color: #FFFFFF; }
.laka-btn--primary:hover { background: var(--rp-accent-hover); color: #FFFFFF; }
.laka-btn--primary:active { background: var(--rp-accent-press); }

.laka-btn--outline {
  background: transparent;
  color: var(--rp-heading);
  border-color: rgba(245, 247, 250, 0.22);
}
.laka-btn--outline:hover { border-color: var(--rp-accent); color: var(--rp-heading); }
.laka-btn--outline[aria-expanded="true"] { border-color: var(--rp-accent); }

.laka-btn--ghost { background: transparent; color: var(--rp-body); }
.laka-btn--ghost:hover { color: var(--rp-heading); }

.laka-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ----------------------------------------------------------------- cards */

.laka-card {
  background: var(--rp-surface);
  border: 1px solid rgba(245, 247, 250, 0.1);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.laka-card--hot { border-color: rgba(63, 110, 233, 0.32); }

.laka-card h5, .laka-card-title {
  margin: 0;
  color: var(--rp-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.laka-panel {
  background: rgba(63, 110, 233, 0.07);
  border: 1px solid rgba(63, 110, 233, 0.32);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.laka-panel--warn { background: rgba(216, 87, 79, 0.07); border-color: rgba(216, 87, 79, 0.32); }
.laka-panel--ok { background: rgba(63, 164, 106, 0.07); border-color: rgba(63, 164, 106, 0.32); }

/* ----------------------------------------------------------------- forms */

.laka-field { display: flex; flex-direction: column; gap: 8px; }

.laka-label {
  color: var(--rp-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.laka-input,
.laka-select,
.laka-textarea {
  width: 100%;
  min-height: var(--target-preferred);
  padding: 12px 16px;
  background: var(--rp-surface);
  color: var(--rp-heading);
  border: 1px solid rgba(245, 247, 250, 0.22);
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.laka-textarea { min-height: 120px; resize: vertical; }

.laka-input::placeholder, .laka-textarea::placeholder { color: var(--rp-muted-text-floor); }

.laka-input:hover, .laka-select:hover, .laka-textarea:hover { border-color: rgba(245, 247, 250, 0.4); }

.laka-input[aria-invalid="true"],
.laka-textarea[aria-invalid="true"] { border-color: var(--rp-danger); }

.laka-error {
  color: var(--rp-danger);
  font-size: 13px;
  line-height: 1.5;
}

.laka-hint { color: var(--rp-muted-text-floor); font-size: 13px; line-height: 1.5; }

/* --------------------------------------------------------------- banners */

.laka-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid var(--rp-hairline);
  background: var(--rp-surface);
  font-size: 14px;
  line-height: 1.6;
}

.laka-banner--info { border-color: rgba(63, 110, 233, 0.32); }
.laka-banner--success { border-color: rgba(63, 164, 106, 0.32); }
.laka-banner--warning { border-color: rgba(201, 138, 46, 0.4); }
.laka-banner--danger { border-color: rgba(216, 87, 79, 0.4); }

.laka-banner [data-laka-dismiss] {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--rp-muted-text-floor);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  min-width: var(--target-minimum);
  min-height: var(--target-minimum);
}
.laka-banner [data-laka-dismiss]:hover { color: var(--rp-heading); }

/* ----------------------------------------------------------------- chips */

.laka-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(245, 247, 250, 0.14);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 13px;
  color: var(--rp-body);
}

.laka-chip--hot {
  border-color: rgba(63, 110, 233, 0.4);
  background: rgba(63, 110, 233, 0.07);
  color: var(--rp-accent-hover);
}

/* ------------------------------------------------------------ header bar */

.laka-header {
  display: flex;
  align-items: center;
  height: 78px;
  padding: 0 var(--space-7);
  background: rgba(7, 9, 13, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rp-hairline);
}

.laka-header__left { display: flex; align-items: center; gap: 13px; }
.laka-header__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.laka-header__seal { height: 34px; width: auto; display: block; }

.laka-header__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rp-heading);
  text-decoration: none;
}
.laka-header__name em, .laka-header__name span { font-style: normal; color: var(--rp-accent); }

@media (max-width: 720px) {
  .laka-header { height: 64px; padding: 0 var(--space-5); }
  .laka-header__seal { height: 32px; }
}

/* -------------------------------------------------------------- sections */

.laka-section { padding: var(--space-10) var(--space-7); }
.laka-section__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-8); }

.laka-rail {
  border-top: 1px solid var(--rp-hairline);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.laka-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

@media (max-width: 720px) {
  .laka-section { padding: var(--space-9) var(--space-5); }
}

/* ---------------------------------------------------------------- motion */

/* Elements with [data-laka-reveal] start hidden and rise 24px over 600ms
   when they enter the viewport (laka.js drives the class swap). Siblings
   stagger 90ms apart via --laka-i, set automatically by laka.js. */

[data-laka-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-rise));
  transition:
    opacity var(--motion-duration) var(--ease-out),
    transform var(--motion-duration) var(--ease-out);
  transition-delay: calc(var(--laka-i, 0) * var(--motion-stagger));
}

[data-laka-reveal].laka-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-laka-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .laka *, .laka-scope * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------- utilities */

.laka-hairline { border: 0; border-top: 1px solid var(--rp-hairline); margin: var(--space-6) 0; }
.laka-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}