/* RP Stellar Holdings — site styles
   Cascade layers, lowest to highest priority. */
@layer reset, base, layout, components, utilities;

/* ------------------------------------------------------------------ */
@layer reset {
  :where(body) { margin: 0; }
  :where(h1, h2, h3, p, dl, dd, figure) { margin: 0; }
  :where(ul[role="list"], nav ul) { list-style: none; margin: 0; padding-inline-start: 0; }
  :where(svg, img) { display: block; max-inline-size: 100%; }
  :where(a) { color: inherit; }
  :where(.container, .card, .button) { box-sizing: border-box; }
}

/* ------------------------------------------------------------------ */
@layer base {
  :root {
    color-scheme: light dark;

    /* Tier 1 — literal tokens */
    --paper-light:      oklch(98.5% 0.005 80);
    --paper-dark:       oklch(15% 0.02 265);
    --band-light:       oklch(95.5% 0.008 80);
    --band-dark:        oklch(18% 0.02 265);
    --card-light:       oklch(100% 0 0);
    --card-dark:        oklch(21% 0.02 265);
    --ink-light:        oklch(22% 0.03 265);
    --ink-dark:         oklch(94% 0.01 265);
    --muted-light:      oklch(45% 0.02 265);
    --muted-dark:       oklch(75% 0.02 265);
    --line-light:       oklch(87% 0.01 265);
    --line-dark:        oklch(31% 0.02 265);
    --accent-light:     oklch(44% 0.14 262);
    --accent-dark:      oklch(80% 0.10 255);
    --accent-ink-light: oklch(100% 0 0);
    --accent-ink-dark:  oklch(16% 0.03 265);

    /* Night palette: used for the header/hero band in both schemes */
    --night:       oklch(15% 0.03 268);
    --night-2:     oklch(26% 0.06 272);
    --night-ink:   oklch(96% 0.01 265);
    --night-muted: oklch(79% 0.02 265);
    --night-line:  oklch(100% 0 0 / 0.12);
    --star:        oklch(84% 0.14 88);

    /* Tier 2 — semantic tokens. Default light; media query for older
       browsers; light-dark() where supported. */
    --paper:      var(--paper-light);
    --band:       var(--band-light);
    --card:       var(--card-light);
    --ink:        var(--ink-light);
    --muted:      var(--muted-light);
    --line:       var(--line-light);
    --accent:     var(--accent-light);
    --accent-ink: var(--accent-ink-light);

    @media (prefers-color-scheme: dark) {
      --paper:      var(--paper-dark);
      --band:       var(--band-dark);
      --card:       var(--card-dark);
      --ink:        var(--ink-dark);
      --muted:      var(--muted-dark);
      --line:       var(--line-dark);
      --accent:     var(--accent-dark);
      --accent-ink: var(--accent-ink-dark);
    }

    @supports (color: light-dark(white, black)) {
      --paper:      light-dark(var(--paper-light), var(--paper-dark));
      --band:       light-dark(var(--band-light), var(--band-dark));
      --card:       light-dark(var(--card-light), var(--card-dark));
      --ink:        light-dark(var(--ink-light), var(--ink-dark));
      --muted:      light-dark(var(--muted-light), var(--muted-dark));
      --line:       light-dark(var(--line-light), var(--line-dark));
      --accent:     light-dark(var(--accent-light), var(--accent-dark));
      --accent-ink: light-dark(var(--accent-ink-light), var(--accent-ink-dark));
    }

    /* Typography & spacing */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --measure: 60ch;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --space: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
    --radius: 0.875rem;

    accent-color: var(--accent);
  }

  html {
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    line-height: 1.6;
    text-align: start;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h1 {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
  }
  h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.5rem); }
  h3 { font-size: 1.2rem; }

  p { text-wrap: pretty; }

  :where(a, button):focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--accent);
    color: var(--accent-ink);
  }
}

/* ------------------------------------------------------------------ */
@layer layout {
  .container {
    max-inline-size: 72rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7.5rem); }
  .section.band { background: var(--band); }

  .grid-2 {
    display: grid;
    gap: var(--space) calc(var(--space) * 2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    align-items: start;
  }

  .section-head { margin-block-end: var(--space); }
  .section-head h2 { max-inline-size: 28ch; }

  .prose {
    max-inline-size: var(--measure);
  }
  .prose :where(p, ul, ol) + :where(p, ul, ol, h2, h3) { margin-block-start: 1em; }
  .prose :where(h2, h3) + * { margin-block-start: 0.6em; }
  .prose :where(h2, h3) { margin-block-start: 1.75em; }
  .prose a {
    color: var(--accent);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
  }
  .prose ul { padding-inline-start: 1.25em; }
  .prose li + li { margin-block-start: 0.35em; }
}

/* ------------------------------------------------------------------ */
@layer components {
  /* Night band shared by header and hero: retokenise locally so every
     descendant (eyebrow, buttons, links) adapts. */
  .site-header, .hero {
    --paper: var(--night);
    --ink: var(--night-ink);
    --muted: var(--night-muted);
    --line: var(--night-line);
    --accent: var(--star);
    --accent-ink: var(--night);
    background: var(--paper);
    color: var(--ink);
  }

  /* Header ---------------------------------------------------------- */
  .site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-block: 1rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-block-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
  }
  .brand svg { inline-size: 1.75rem; block-size: 1.75rem; }
  .star { fill: var(--star); }

  .site-header nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
  }
  .site-header nav a {
    display: inline-block;
    padding: 0.65em 0.25em;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
  }
  .site-header nav a:hover { color: var(--ink); }
  @media (width < 40rem) {
    .site-header nav ul { gap: 0 1rem; }
    .site-header nav a { font-size: 0.95rem; }
  }

  /* Hero ------------------------------------------------------------ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
      radial-gradient(ellipse 70% 80% at 85% 0%, var(--night-2), transparent 70%),
      var(--paper);
  }
  .hero .container {
    position: relative;
    padding-block: clamp(4rem, 3rem + 7vw, 9.5rem);
  }
  .hero h1 { max-inline-size: 20ch; }
  .hero .lede {
    max-inline-size: 54ch;
    margin-block-start: 1.5rem;
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    color: var(--muted);
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2.25rem;
  }
  /* Confined to the right half so it never sits behind the copy on wide screens */
  .constellation {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    z-index: -1;
    inline-size: 50%;
    block-size: 100%;
    color: var(--night-ink);
    opacity: 0.6;
    pointer-events: none;
  }
  @media (width < 56rem) {
    .constellation { inset-inline-start: 0; inline-size: 100%; opacity: 0.22; }
  }

  /* Buttons --------------------------------------------------------- */
  .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: 2.9rem;
    padding: 0.7em 1.4em;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
  }
  .button:hover {
    background: color-mix(in oklab, var(--accent), white 10%);
  }
  .button.ghost {
    background: transparent;
    color: inherit;
    border-color: color-mix(in oklab, currentColor 40%, transparent);
  }
  .button.ghost:hover {
    background: color-mix(in oklab, currentColor 8%, transparent);
    border-color: currentColor;
  }

  /* Eyebrow labels -------------------------------------------------- */
  .eyebrow {
    margin-block-end: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
  }

  /* Cards ----------------------------------------------------------- */
  .cards {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin-block-start: var(--space);
  }
  .card {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .card svg {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    margin-block-end: 0.4rem;
    color: var(--accent);
  }
  .card p { color: var(--muted); }

  /* Facts list ------------------------------------------------------ */
  .facts {
    display: grid;
    border-block-start: 1px solid var(--line);
  }
  .facts > div {
    display: grid;
    grid-template-columns: minmax(8rem, 30%) 1fr;
    gap: 1rem;
    padding-block: 0.9rem;
    border-block-end: 1px solid var(--line);
  }
  .facts dt { color: var(--muted); font-size: 0.9em; }
  .facts dd { font-weight: 500; }

  /* Footer ---------------------------------------------------------- */
  .site-footer {
    padding-block: 3rem;
    border-block-start: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
  }
  .site-footer .container {
    display: grid;
    gap: 1.5rem 3rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
  }
  .site-footer .brand { color: var(--ink); }
  .site-footer .legal { max-inline-size: 60ch; }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
  }
  .footer-links a {
    display: inline-block;
    padding-block: 0.4em;
    text-underline-offset: 0.15em;
  }
  .footer-links a:hover { color: var(--ink); }
  .site-footer .copyright {
    grid-column: 1 / -1;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--line);
  }

  /* Simple page (privacy, 404) -------------------------------------- */
  .page .container { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
  .page .eyebrow { color: var(--muted); }
  .page h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); max-inline-size: 22ch; }
  .page .lede { color: var(--muted); font-size: 1.15em; margin-block: 1rem 2rem; }
}

/* ------------------------------------------------------------------ */
@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  .skip-link:where(:focus-within, :active) {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 100;
    padding: 0.75em 1.25em;
    border-radius: 999px;
    background: var(--star);
    color: var(--night);
    font-weight: 600;
    text-decoration: none;
  }
}

/* Environment adaptations ------------------------------------------- */
@media (pointer: coarse) {
  .site-header nav a, .footer-links a { padding-block: 0.8em; }
}

@media (forced-colors: active) {
  .button { border-color: ButtonText; }
  .card, .facts > div, .site-footer, .site-footer .copyright { border-color: CanvasText; }
}

@media print {
  .site-header nav, .actions, .constellation, .skip-link { display: none; }
  .site-header, .hero { background: none; color: inherit; }
}