/* 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; }
.accent-marquee { --accent-primary: #A57CFF; --accent-secondary: #FFC66D; }

/* 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;
}