/* shingles.page — Design tokens */
:root {
  /* ---- primitives: palette (do not use directly in components) ---- */
  --petrol-900: #0F3330;
  --petrol-700: #134E4A;
  --petrol-500: #2A5552;
  --teal-400:  #6FC3B8;
  --teal-200:  #A9DAD3;
  --amber-500: #D89A4E;
  --amber-600: #BF8334;
  --cool-050:  #EAF1F0;
  --cool-100:  #E8EFEE;
  --cool-150:  #DCE7E5;
  --grey-500:  #607A77;
  --rust-700:  #A8431F;
  --rust-050:  #F7E9E2;
  --white:     #FFFFFF;

  /* ---- semantic: reference these in components ---- */
  --color-bg:            var(--cool-050);
  --color-surface:       var(--white);
  --color-surface-sunken:var(--cool-100);
  --color-text:          var(--petrol-900);
  --color-text-muted:    var(--petrol-500);
  --color-text-faint:    var(--grey-500);
  --color-brand:         var(--petrol-700);
  --color-brand-ink:     var(--petrol-900);
  --color-accent:        var(--amber-500);
  --color-accent-hover:  var(--amber-600);
  --color-line:          rgba(19, 78, 74, 0.12);
  --color-focus:         var(--teal-400);

  --color-urgent:        var(--rust-700);
  --color-urgent-bg:     var(--rust-050);
  --color-info-bg:       var(--cool-100);

  --gradient-hero: linear-gradient(180deg, var(--cool-100), var(--cool-150));

  /* ---- shape / type ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --font-display: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- motif tokens: the dermatome band ---- */
  --band-color-outer: var(--cool-050);
  --band-color-mid:   var(--teal-400);
  --band-color-inner: var(--amber-500);
  --band-color-line:  rgba(234, 241, 240, 0.24);
  --band-w-outer: 18;
  --band-w-mid:   20;
  --band-w-inner: 16;
}

/* ---- baseline ---- */
html { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
a { color: var(--color-brand); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---- brand-band motif SVG ---- */
.brand-logo { width: 40px; height: 40px; background: var(--color-brand);
              border-radius: var(--radius-md); display: grid; place-items: center; }
.brand-logo .brand-band { width: 100%; height: 100%; }
.hero { position: relative; overflow: hidden; }
.hero .brand-band { position: absolute; right: -18%; top: 50%;
                    width: 70%; height: auto; transform: translateY(-50%);
                    opacity: 0.5; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero .brand-band { transition: opacity .6s ease; }
}
.accent-rule { width: 132px; height: 6px; background: var(--color-accent); border: 0; }
.callout--urgent { background: var(--color-urgent-bg); border-left: 4px solid var(--color-urgent); }
.note--disclaimer { background: var(--color-info-bg); border-radius: var(--radius-md); }

/* ---- user menu (matches cellularcosmology.org pattern) ---- */
.user-menu-wrapper { position: relative; margin-left: 0.5rem; flex-shrink: 0; }
.user-menu-toggle { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1.5px solid var(--color-line); color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: border-color 0.2s, color 0.2s; }
.user-menu-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }
.user-menu-toggle .initials { font-size: 0.75rem; font-weight: 700; color: var(--color-brand); }
.user-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(15,51,48,0.12); min-width: 180px; z-index: 100; }
.user-dropdown.open { display: block; }
.user-dropdown-header { padding: 0.8rem 1rem; font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--color-text); border-bottom: 1px solid var(--color-line); }
.user-dropdown a { display: block; padding: 0.7rem 1rem; font-size: 0.9rem; color: var(--color-text); text-decoration: none; transition: background 0.15s; }
.user-dropdown a:hover { background: var(--color-info-bg); color: var(--color-accent); text-decoration: none; }

.lang-switcher { display:flex; align-items:center; gap:0.3rem; font-size:0.82rem; font-weight:600; }
.lang-switcher a { padding:0.15rem 0.35rem; }
.lang-switcher .lang-option.active { color:var(--color-brand); }
.lang-divider { color:var(--color-line); }