/* reneos-kit.css: reneOS Design System v1, built 2026-10-20 from reneos-site/design/{tokens.css,typography.css,motion.css,glass.css}.
   Generated by build_kit.py. Do not edit here. */
/* ---- tokens.css ---- */
/* reneOS design tokens (Design System v1, sections 03, 12, 13, 22, 34, 36).
   The single place colours, spacing, radius, layout and motion are defined.
   Pages use these variables; they do not invent their own values. */
:root {
  /* colour */
  --rene-black: #05080C;
  --rene-black-soft: #080D13;
  --rene-surface: #0B1118;
  --rene-surface-raised: #101821;

  --rene-white: #F5F7FA;
  --rene-white-soft: #D9E0E7;
  --rene-muted: #93A0AD;
  --rene-dim: #66727F;

  --rene-blue: #7ECFFF;
  --rene-blue-bright: #A9E0FF;
  --rene-blue-deep: #4B9FE8;

  --rene-gold: #E9C78D;
  --rene-gold-bright: #FFF0D1;
  --rene-gold-deep: #B98645;

  --rene-line: rgba(255, 255, 255, 0.13);
  --rene-line-soft: rgba(255, 255, 255, 0.08);
  --rene-glass: rgba(255, 255, 255, 0.035);
  --rene-glass-hover: rgba(255, 255, 255, 0.055);

  /* functional states only, never brand colour */
  --rene-error: #E77C7C;
  --rene-success: #82C7A5;

  /* product accents */
  --party-pink: #F06AA9;
  --party-blue: #73B8FF;

  /* spacing, 8px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* layout */
  --rene-max-width: 1440px;

  /* motion */
  --rene-ease: cubic-bezier(.2, .8, .2, 1);
  --rene-transition: 240ms var(--rene-ease);
  --rene-transition-slow: 500ms var(--rene-ease);

  /* type */
  --rene-font: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

/* per-product accents: put the class on a page or a card */
.accent-calista, .accent-housewatch, .accent-studio { --accent-primary: #8FD4FF; --accent-secondary: #E9C78D; }
.accent-sound { --accent-primary: #8FD4FF; --accent-secondary: #DCE8F2; }
.accent-at-home { --accent-primary: #E9C78D; --accent-secondary: #8FD4FF; }
.accent-lume { --accent-primary: #A9E0FF; --accent-secondary: #E9C78D; }
.accent-power-hour { --accent-primary: #E9C78D; --accent-secondary: #FFF0D1; }
.accent-party { --accent-primary: #F06AA9; --accent-secondary: #73B8FF; }

/* the page: atmosphere felt before it is noticed */
.rene-page {
  min-height: 100vh;
  color: var(--rene-white);
  font-family: var(--rene-font);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at 18% 15%, rgba(50, 110, 155, 0.15), transparent 34%),
    radial-gradient(circle at 82% 25%, rgba(205, 160, 95, 0.08), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(50, 80, 110, 0.08), transparent 42%),
    var(--rene-black);
  background-attachment: fixed;
}
@supports (-webkit-touch-callout: none) { .rene-page { background-attachment: scroll; } }

.rene-container {
  width: min(calc(100% - 48px), var(--rene-max-width));
  margin-inline: auto;
}

/* ---- typography.css ---- */
/* reneOS typography (Design System v1, section 06). Inter, restrained weights.
   Load Inter 300/400/500 on the page (Google Fonts). */
.rene-display { font-size: clamp(3rem, 7vw, 7rem); font-weight: 300; letter-spacing: -0.045em; line-height: 0.95; }
.rene-h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1; }
.rene-h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); font-weight: 400; letter-spacing: -0.025em; }
.rene-h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
.rene-body { font-size: 0.95rem; font-weight: 400; line-height: 1.6; color: var(--rene-muted); }
.rene-eyebrow { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rene-muted); }

/* the engraved label: what a physical control would have printed under it */
.rene-label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rene-white); }

/* ---- motion.css ---- */
/* reneOS motion (Design System v1, sections 18-19). Hardware, not cartoons:
   opacity, a few pixels of travel, 0.985 on press. No bounce. */
.rene-rise { animation: rene-rise 500ms var(--rene-ease) both; }
@keyframes rene-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- glass.css ---- */
/* reneOS material (Design System v1, sections 04, 10, 14-16, 24).
   Architectural smoked glass: 0.02 to 0.08 opacity, never white. */
.rene-glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 20px 60px rgba(0, 0, 0, 0.20);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
}
.rene-glass-raised {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 70px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(32px) saturate(125%);
  backdrop-filter: blur(32px) saturate(125%);
}

/* the application card */
.rene-experience-card {
  position: relative;
  min-height: 220px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  color: var(--rene-white);
  text-decoration: none;
  transition: transform 300ms var(--rene-ease), border-color 300ms ease, background 300ms ease;
}
.rene-experience-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.20);
}
.rene-experience-card:active { transform: translateY(-1px) scale(0.985); }

/* icons */
rene-icon { display: inline-block; width: 64px; height: 64px; line-height: 0; flex: none; }
rene-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(126, 207, 255, 0.22)); }
rene-icon[glow="gold"] svg { filter: drop-shadow(0 0 6px rgba(233, 199, 141, 0.18)); }
rene-icon[glow="none"] svg { filter: none; }

/* buttons */
.rene-button-primary, .rene-button-secondary {
  font: inherit; font-size: 0.85rem; font-weight: 500; border-radius: 14px; padding: 12px 20px; cursor: pointer;
  transition: background var(--rene-transition), border-color var(--rene-transition), transform var(--rene-transition);
}
.rene-button-primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(220, 230, 238, 0.88));
  color: #071019; border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
}
.rene-button-secondary { background: rgba(255, 255, 255, 0.035); color: var(--rene-white); border: 1px solid rgba(255, 255, 255, 0.14); }
.rene-button-secondary:hover { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.22); }
.rene-button-primary:active, .rene-button-secondary:active { transform: scale(0.985); }
.rene-button-primary:disabled, .rene-button-secondary:disabled { opacity: 0.45; cursor: default; }

.rene-field {
  font: inherit; font-size: 0.85rem; color: var(--rene-white); background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 11px 14px; outline: none;
  transition: border-color var(--rene-transition);
}
.rene-field:focus { border-color: rgba(143, 212, 255, 0.55); }

/* navigation surface */
.rene-nav { background: rgba(5, 8, 12, 0.62); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* dividers */
.rene-divider { height: 1px; background: rgba(255, 255, 255, 0.09); border: 0; }
.rene-divider-gold { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(233, 199, 141, 0.55), transparent); }

/* focus, everywhere */
.rene-page a:focus-visible, .rene-page button:focus-visible, .rene-page input:focus-visible {
  outline: 1px solid rgba(143, 212, 255, 0.70); outline-offset: 3px;
}