/* Addy: the front page's look carried across the site. The moving spectrum field fills the page
   (brand-field.js draws it into #field.theme-field). Headings, the logo and the nav sit right on it in
   white with a soft shadow; anything you read or fill in is white, like the front page's handle pill:
   white app cards and panels with dark type, white pill buttons and fields. The sign-in pages always
   use it, with no card at all (ThemeCatalog.ADDY). */

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

  --bg: #d8321e;
  --surface: rgba(255, 255, 255, 0.14);
  --surface-2: rgba(255, 255, 255, 0.1);
  --surface-3: rgba(255, 255, 255, 0.2);
  --ink: #ffffff;
  --on-ink: #1a0b10;

  --text: #ffffff;
  --dim: rgba(255, 255, 255, 0.86);
  --faint: rgba(255, 255, 255, 0.66);
  --link: #ffffff;

  --line: rgba(255, 255, 255, 0.22);
  --line-strong: rgba(255, 255, 255, 0.4);

  --accent: #ffffff;
  --accent-hover: #fff6e8;
  --accent-ink: #1a0b10;
  --highlight: #ffffff;
  --danger: #ffffff;
  --ok: #ffffff;

  --display-tracking: -0.01em;

  --card-bg: #ffffff;
  --card-text: #1a0b10;
  --card-shadow: 0 18px 40px -24px rgba(40, 0, 10, 0.55);
  --card-hover-shadow: 0 26px 50px -24px rgba(40, 0, 10, 0.7);
  --panel-bg: #ffffff;
  --panel-shadow: 0 18px 40px -24px rgba(40, 0, 10, 0.55);

  --button-bg: rgba(40, 0, 10, 0.12);
  --button-text: #ffffff;
  --button-border: 1px solid rgba(255, 255, 255, 0.55);
  --button-hover-bg: rgba(40, 0, 10, 0.22);
  --button-radius: 999px;

  --input-bg: #ffffff;
  --input-border: 1px solid #ffffff;
  --input-radius: 999px;

  --header-bg: transparent;
  --header-text: #ffffff;
  --nav-bg: transparent;
  --nav-text: rgba(255, 255, 255, 0.86);
  --nav-on-bg: rgba(255, 255, 255, 0.2);
  --nav-on-text: #ffffff;
}

/* The still spectrum shows until the field paints (and stays without WebGL). */
:root[data-theme="addy"] { background: #d8321e var(--band); background-attachment: fixed; }
:root[data-theme="addy"] body { background: transparent; }

/* The header is just the logo, floating on the field. */
:root[data-theme="addy"] .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-theme="addy"] .wordmark .logo { filter: drop-shadow(0 4px 20px rgba(60, 0, 10, 0.18)); }

/* White cards and panels: everything inside reads dark again, with the house red for links and a
   dark primary button (a white one would vanish on white). */
:root[data-theme="addy"] :is(.app-card, .rail-block, .activity, .form-card:not(.auth-card), .member-list, .waitlist-card, .door,
  .claim-banner, .remix-card, .empty-large, .stat-strip a, .data-table-wrap, .theme-option, .readme, .try-tab, .m-callout, .app-about, .app-facts) {
  --text: #1a0b10;
  --dim: #7a6a70;
  --faint: #a2959a;
  --link: #c0321e;
  --line: rgba(26, 11, 16, 0.08);
  --line-strong: rgba(26, 11, 16, 0.18);
  --surface: #ffffff;
  --surface-2: #f5f2ee;
  --surface-3: #e9e4df;
  --accent: #1a0b10;
  --accent-hover: #3a1f28;
  --accent-ink: #ffffff;
  --highlight: #e6b33b;
  --danger: #c8372a;
  --ok: #188a5c;
  --button-bg: #ffffff;
  --button-text: #1a0b10;
  --button-border: 1px solid rgba(26, 11, 16, 0.18);
  --button-hover-bg: #f5f2ee;
  --input-bg: #f5f2ee;
  --input-border: 1px solid rgba(26, 11, 16, 0.12);
  color: var(--text);
  text-shadow: none;
}
:root[data-theme="addy"] :is(.app-card, .rail-block, .activity, .form-card:not(.auth-card), .member-list, .waitlist-card, .door,
  .claim-banner, .remix-card, .empty-large, .data-table-wrap, .theme-option, .readme, .app-about, .app-facts) :is(h1, h2, h3, p, label, summary, .link, .field) { text-shadow: none; }
:root[data-theme="addy"] .form-card:not(.auth-card) .field input:focus,
:root[data-theme="addy"] .form-card:not(.auth-card) .field textarea:focus { box-shadow: 0 0 0 3px rgba(230, 179, 59, 0.45); }
:root[data-theme="addy"] .form-card:not(.auth-card) .banner-quiet,
:root[data-theme="addy"] .form-card:not(.auth-card) .banner-notice,
:root[data-theme="addy"] .form-card:not(.auth-card) .banner-error { background: #f5f2ee; color: #1a0b10; border-color: rgba(26, 11, 16, 0.12); }

/* The search field is a white pill like the rest. */
:root[data-theme="addy"] .site-search input { background: #ffffff; border-color: #ffffff; color: #1a0b10; border-radius: 999px; }
:root[data-theme="addy"] .site-search input::placeholder { color: #9a928c; }

/* The footer floats on the field too. */
:root[data-theme="addy"] .site-footer { background: transparent; border-top-color: rgba(255, 255, 255, 0.3); color: #ffffff; }
:root[data-theme="addy"] .site-footer a { color: #ffffff; }

/* White type with the front page's soft shadow. */
:root[data-theme="addy"] :is(h1, h2, h3, p, label, summary, .link, .field, .page-title, .lede) { text-shadow: 0 1px 14px rgba(60, 0, 10, 0.2); }

/* Buttons: the primary is the front page's white pill. */
:root[data-theme="addy"] .button { text-shadow: none; }
:root[data-theme="addy"] .button.accent { box-shadow: 0 10px 30px rgba(60, 0, 10, 0.22); }
:root[data-theme="addy"] .button.accent:hover { box-shadow: 0 14px 40px rgba(60, 0, 10, 0.3); }

/* Fields: white pills with dark type, like the handle field. */
:root[data-theme="addy"] .field input:is([type="text"], [type="url"], [type="email"], [type="password"]),
:root[data-theme="addy"] .field textarea { color: #1a0b10; padding: 13px 18px; text-shadow: none; }
:root[data-theme="addy"] .field textarea { border-radius: 22px; }
:root[data-theme="addy"] .field input::placeholder { color: #b3aca6; }
:root[data-theme="addy"] .field input:focus,
:root[data-theme="addy"] .field textarea:focus { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 12px 40px -12px rgba(40, 0, 10, 0.45); }
:root[data-theme="addy"] .field input.code { padding: 14px 18px; }

/* Messages: translucent pills of dark glass, so they read on any band. */
:root[data-theme="addy"] :is(.banner-notice, .banner-error, .banner-quiet) {
  color: #ffffff; background: rgba(40, 0, 10, 0.28); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 18px; text-shadow: none;
}
:root[data-theme="addy"] .banner-error { font-weight: 600; }

/* Sign-in: no card, centered on the field like the front page's hero. */
:root[data-theme="addy"] .auth-page { display: grid; place-items: center; padding: 24px 24px 12vh; }
:root[data-theme="addy"] .auth-card { background: none; box-shadow: none; padding: 0; max-width: 380px; text-align: center; }
:root[data-theme="addy"] .auth-card h1 { font-size: clamp(34px, 4vw, 46px); margin-bottom: 24px; }
:root[data-theme="addy"] .auth-card > p { margin-bottom: 24px; }
:root[data-theme="addy"] .auth-card :is(form, .field) { text-align: left; }
:root[data-theme="addy"] .auth-card .field { color: #ffffff; }
:root[data-theme="addy"] .auth-card .button:not(.small) { padding: 15px 20px; font-size: 16px; }
:root[data-theme="addy"] .auth-card .email-option summary,
:root[data-theme="addy"] .auth-card .link { color: #ffffff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-underline-offset: 4px; }
:root[data-theme="addy"] .auth-card .email-option summary:hover,
:root[data-theme="addy"] .auth-card .link:hover { text-decoration-color: #ffffff; }
:root[data-theme="addy"] .auth-card .divider::before,
:root[data-theme="addy"] .auth-card .divider::after { background: rgba(255, 255, 255, 0.4); }
:root[data-theme="addy"] .auth-card input.code { text-align: center; }
:root[data-theme="addy"] .auth-card .handle-input { padding: 0 18px; }
:root[data-theme="addy"] .auth-card .handle-input .dim { color: #9a928c; text-shadow: none; }