@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* NoE Eclipse design tokens.
   One shared set of values for the whole site (rules: .claude/skills/noe-eclipse-ui/SKILL.md).
   Everything is prefixed --noe- so it never collides with a page's own variables. */
:root {
  /* Crimson is action and state. */
  --noe-red: #a20000;
  --noe-red-deep: #560000;
  --noe-red-hover: #c01010;
  --noe-red-glow: color-mix(in srgb, var(--noe-red) 55%, transparent);
  --noe-red-wash: color-mix(in srgb, var(--noe-red) 16%, transparent);

  /* Gold is structure and identity. */
  --noe-gold: #c9a35f;
  --noe-gold-bright: #f0d398;
  --noe-gold-edge: #ca8c34;
  --noe-gold-soft: color-mix(in srgb, var(--noe-gold) 40%, transparent);
  --noe-gold-dim: color-mix(in srgb, var(--noe-gold) 18%, transparent);
  /* Keep ordinary button frames complete at rest; hover may brighten this edge. */
  --noe-button-edge: var(--gold-soft, var(--noe-gold-soft));

  /* Surfaces: warm near-black. */
  --noe-ink: #0b0808;
  --noe-bg: #161616;
  --noe-field: #110d0e;
  --noe-control: rgba(30, 22, 22, .78);
  --noe-plate: rgba(18, 15, 15, .72);
  --noe-plate-hover: rgba(44, 30, 30, .92);
  --noe-frame: linear-gradient(160deg, rgba(26, 16, 16, .9), rgba(9, 7, 8, .97));
  --noe-ink-gradient: linear-gradient(180deg, #2a1a1a, #0d0a0a);
  --noe-page: radial-gradient(circle at 50% -10%, rgba(162, 0, 0, .2), transparent 55%), #0b0808;

  /* Text. */
  --noe-text: #f0edf5;
  --noe-paper: #e9e9f2;
  --noe-muted: rgba(233, 233, 242, .68);
  --noe-faint: rgba(233, 233, 242, .45);
  --noe-line: rgba(233, 233, 242, .1);

  /* Status: text colour, 1px tinted edge, ~8% fill. */
  --noe-success: #8fdba6;
  --noe-success-line: rgba(143, 219, 166, .42);
  --noe-warning: #eab85d;
  --noe-warning-line: rgba(234, 184, 93, .42);
  --noe-danger: #ff9f9f;
  --noe-danger-line: rgba(255, 110, 110, .42);

  /* Shape and type. */
  --noe-radius-control: 2px;
  --noe-radius-panel: 0;
  --noe-font: "Montserrat", "Segoe UI", sans-serif;
  --noe-font-serif: Georgia, "Times New Roman", serif;
  --noe-shadow-panel: 0 22px 46px rgba(0, 0, 0, .45);
  --noe-shadow-dialog: 0 18px 54px rgba(0, 0, 0, .87);
  --noe-star: url('/assets/ui/little-star.svg');

  /* Shared stylesheet architecture; existing Eclipse values above stay authoritative. */
  --noe-primary: linear-gradient(135deg, var(--noe-red), var(--noe-red-deep));
  --noe-primary-text: #fff5e6;
  --noe-selected: linear-gradient(135deg, rgba(162,0,0,.3), var(--noe-field));
  --noe-selected-shadow: 0 8px 22px color-mix(in srgb, var(--noe-red) 22%, transparent);
  --noe-danger-wash: rgba(255,110,110,.08);
  --noe-backdrop: rgba(5,3,4,.78);
  --noe-scrollbar: rgba(201,163,95,.55);
  --noe-motion: .15s ease;
  --noe-control-height: 38px;
  --noe-label-size: .76rem;
  --noe-space-1: 4px;
  --noe-space-2: 8px;
  --noe-space-3: 12px;
  --noe-space-4: 16px;
  --noe-space-5: 24px;
  --noe-radius-nav: 3px;
  --noe-radius-nav-menu: 0 0 3px 3px;
  --noe-nav-height: 64px;
  --noe-nav-z: 10000;
  --noe-nav-menu-z: 10010;
  --noe-nav-overlay-z: 10020;
  --noe-nav-auth-z: 10030;
  --noe-overlay-z: 10100;
  --noe-page-top: 40px;
  --noe-page-bottom: 72px;
  --noe-page-gutter: var(--noe-space-4);
  --noe-panel: var(--noe-field);
  --noe-border: var(--noe-gold-soft);
  --noe-accent: var(--noe-gold);
  --noe-shadow: rgba(8, 6, 6, .42);
  --noe-library-red: #9f171d;
  --noe-library-red-deep: #571015;
  --noe-library-gold: #d0a559;
  --noe-library-gold-bright: var(--noe-gold-bright);
  --noe-library-gold-soft: color-mix(in srgb, var(--noe-library-gold) 40%, transparent);
  --noe-library-gold-dim: color-mix(in srgb, var(--noe-library-gold) 18%, transparent);
}

/* Little-star studs at the two top corners of a frame. Add the class to any positioned frame. */
.noe-star-studs, .noe-hero { position: relative; }
.noe-star-studs::before,
.noe-star-studs::after,
.noe-hero::before,
.noe-hero::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 10px;
  height: 11px;
  background: var(--noe-star) center/contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(240, 211, 152, .5));
  pointer-events: none;
}
.noe-star-studs::before, .noe-hero::before { left: -5px; }
.noe-star-studs::after, .noe-hero::after { right: -5px; }
@media (max-width: 600px) { .noe-star-studs::before, .noe-hero::before { left: 0; } .noe-star-studs::after, .noe-hero::after { right: 0; } }