/* =============================================================================
   LITTLE MOO HOSTING — DESIGN TOKENS

   Two designed themes, not one theme and an inversion. Every colour a
   component uses is a semantic role, and each role is given a value per
   theme. Nothing below is a page-specific colour.

   Light  warm cream ground, white surfaces, pale lavender emphasis,
          deep ink type, brand purple for action.
   Dark   deep ink ground, raised plum surfaces, warm off-white type,
          pale lavender support, purple held at a controlled brightness.

   Deep-ink sections stay dark in both themes, so the roles that paint them
   (--section-ink, --text-on-ink) are close to constant.
   ============================================================================= */

/* ── Light ──────────────────────────────────────────────────────────────── */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --page:            #F7F5F2;
  --surface:         #FFFFFF;
  --surface-raised:  #FFFFFF;
  --surface-soft:    #EFEBE5;

  --section-lavender: #EDEAFA;
  --section-ink:      #100D24;
  --section-ink-deep: #07060F;

  --text:            #16132B;
  --text-soft:       #4A4560;
  --text-muted:      #5E5773;
  --text-on-ink:     #FFFFFF;
  --text-on-ink-2:   #C6BFDE;
  --text-on-ink-3:   #948CAF;
  --text-on-lavender:#4A4364;

  --border:          #E3DDD5;
  --border-strong:   #CFC7BC;
  --border-lavender: #D6CFEF;
  --border-ink:      rgba(201, 190, 255, .18);

  /* Two brand roles. --brand-fill is a ground that carries white text;
     --brand is the ink used for links, ticks, numbers and eyebrows. In the
     light theme they are the same purple. In the dark theme they separate,
     because one colour cannot be both a readable link on a dark ground and
     a button that white text sits on. */
  --brand:           #6D4CDB;
  --brand-fill:      #6D4CDB;
  --brand-hover:     #5636BE;
  --brand-soft:      #EDEAFA;
  --brand-quiet:     #9B82FF;

  --focus:           #6D4CDB;
  --selection:       rgba(109, 76, 219, .22);

  --header-ground:   #F7F5F2;
  --footer-ground:   #100D24;

  --shadow-1: 0 1px 2px rgba(22, 19, 43, .06);
  --shadow-2: 0 10px 30px -18px rgba(22, 19, 43, .35);
  --shadow-3: 0 30px 70px -34px rgba(62, 39, 144, .45);

  /* How much a photograph is settled into the page. */
  --photo-veil: rgba(16, 13, 36, .10);
}

/* ── Dark ───────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  color-scheme: dark;

  --page:            #14111F;
  --surface:         #1B1729;
  --surface-raised:  #221D33;
  --surface-soft:    #221D33;

  /* The role pale lavender plays in the light theme is played here by a
     muted plum band: the same job, a ground that lifts a section away from
     the page without becoming a card. */
  --section-lavender: #221B38;
  --section-ink:      #0C0A16;
  --section-ink-deep: #07060F;

  --text:            #F4F1EC;
  --text-soft:       #BFB8D2;
  --text-muted:      #9A93AE;
  --text-on-ink:     #FFFFFF;
  --text-on-ink-2:   #C6BFDE;
  --text-on-ink-3:   #9A93AE;
  --text-on-lavender:#C6BFDE;

  --border:          rgba(214, 206, 236, .14);
  --border-strong:   rgba(214, 206, 236, .28);
  --border-lavender: rgba(214, 206, 236, .18);
  --border-ink:      rgba(201, 190, 255, .16);

  --brand:           #A78BFA;   /* readable as text on the dark ground */
  --brand-fill:      #7C5CE0;   /* carries white text at AA */
  --brand-hover:     #8E71EA;
  --brand-soft:      rgba(139, 109, 240, .18);
  --brand-quiet:     #9B82FF;

  --focus:           #A78BFA;
  --selection:       rgba(167, 139, 250, .28);

  --header-ground:   #14111F;
  --footer-ground:   #0C0A16;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --shadow-3: 0 30px 70px -34px rgba(0, 0, 0, .9);

  --photo-veil: rgba(7, 6, 15, .18);
}

/* System preference without JavaScript.
   The head script normally resolves `system` to an explicit attribute before
   first paint. With scripting off no attribute is set at all, so the same
   dark values are applied here from the media query. The guard means an
   explicit light choice still wins over a dark operating system. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
  color-scheme: dark;

  --page:            #14111F;
  --surface:         #1B1729;
  --surface-raised:  #221D33;
  --surface-soft:    #221D33;

  /* The role pale lavender plays in the light theme is played here by a
     muted plum band: the same job, a ground that lifts a section away from
     the page without becoming a card. */
  --section-lavender: #221B38;
  --section-ink:      #0C0A16;
  --section-ink-deep: #07060F;

  --text:            #F4F1EC;
  --text-soft:       #BFB8D2;
  --text-muted:      #9A93AE;
  --text-on-ink:     #FFFFFF;
  --text-on-ink-2:   #C6BFDE;
  --text-on-ink-3:   #9A93AE;
  --text-on-lavender:#C6BFDE;

  --border:          rgba(214, 206, 236, .14);
  --border-strong:   rgba(214, 206, 236, .28);
  --border-lavender: rgba(214, 206, 236, .18);
  --border-ink:      rgba(201, 190, 255, .16);

  --brand:           #A78BFA;   /* readable as text on the dark ground */
  --brand-fill:      #7C5CE0;   /* carries white text at AA */
  --brand-hover:     #8E71EA;
  --brand-soft:      rgba(139, 109, 240, .18);
  --brand-quiet:     #9B82FF;

  --focus:           #A78BFA;
  --selection:       rgba(167, 139, 250, .28);

  --header-ground:   #14111F;
  --footer-ground:   #0C0A16;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --shadow-3: 0 30px 70px -34px rgba(0, 0, 0, .9);

  --photo-veil: rgba(7, 6, 15, .18);
  }
}


/* ── Legacy names ───────────────────────────────────────────────────────
   The components were written against these names before the themes
   existed. Rather than scatter theme logic through six stylesheets, each
   old name is an alias of the semantic role it was always standing for, so
   every existing rule became theme-aware in one place. New work should use
   the semantic roles above. */

:root {
  --warm:        var(--page);
  --warm-lift:   var(--surface);
  --warm-sub:    var(--surface-soft);
  --warm-line:   var(--border);

  --lilac:       var(--section-lavender);
  --lilac-deep:  var(--surface-soft);
  --lilac-line:  var(--border-lavender);

  --ink:         var(--section-ink);
  --ink-2:       #17133A;
  --ink-3:       #1E1947;
  --ink-line:    var(--border-ink);
  --black:       var(--section-ink-deep);

  --purple:      var(--brand);
  --purple-hi:   var(--brand-hover);
  --purple-lo:   var(--brand-hover);
  --purple-deep: #3E2790;
  --accent:      var(--brand-quiet);
  --lavender:    #C9BCFF;

  --on-warm:     var(--text);
  --on-warm-2:   var(--text-soft);
  --on-warm-3:   var(--text-muted);
  --on-ink:      var(--text-on-ink);
  --on-ink-2:    var(--text-on-ink-2);
  --on-ink-3:    var(--text-on-ink-3);

  --lift-1:      var(--shadow-1);
  --lift-2:      var(--shadow-2);
  --lift-3:      var(--shadow-3);
  --lift-dark:   0 30px 70px -30px rgba(0, 0, 0, .75);

  /* ── Type ───────────────────────────────────────────────────────────── */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-micro: 0.8125rem;
  --t-mini:  0.8125rem;
  --t-small: 0.9375rem;
  --t-body:  1.0625rem;
  --t-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-h4:    1.0625rem;
  --t-h3:    clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  --t-h2:    clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --t-h1:    clamp(2.5rem, 1.9rem + 2.7vw, 4.5rem);

  /* ── Space ──────────────────────────────────────────────────────────── */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 2.75rem; --s8: 3.75rem;
  --s9: 5rem;   --s10: 7rem;

  --section: clamp(3.25rem, 5vw, 5.25rem);
  --gutter:  clamp(1.25rem, 4.3vw, 4rem);
  --shell:   1320px;

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  --tap: 44px;
}

/* ── Motion ─────────────────────────────────────────────────────────────
   Three durations and one curve. Nothing animates `all`, and nothing
   animates a property that forces layout. */

:root {
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --fast:   160ms;   /* interaction: hover, focus, press          */
  --base:   280ms;   /* transition: menus, tabs, state changes    */
  --slow:   600ms;   /* reveal: a section arriving once           */

  --rise:   14px;    /* how far a reveal travels                  */
  --theme-fade: 220ms;
}

/* Swapping theme should feel like the lights changing, not like a page
   redrawing. Only the properties that actually differ are transitioned,
   and only while the switch is in flight. */
:root[data-theme-switching] :where(body, header, footer, section, article, aside, div, a, button, input, li, dl) {
  transition: background-color var(--theme-fade) var(--ease),
              border-color var(--theme-fade) var(--ease),
              color var(--theme-fade) var(--ease);
}

::selection { background: var(--selection); }

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 1ms; --base: 1ms; --slow: 1ms; --rise: 0px; --theme-fade: 1ms; }
}