/* =======================================================================
   Scroll of Fire — Core Layout & Components
   File: assets/css/core.css
   Depends on: tokens.css
   Layers: base, components, utilities
   ======================================================================= */

@layer base, components, utilities;

/* ===================== BASE ===================== */
@layer base {
  html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: var(--w-regular) var(--fs-md)/var(--lh-body) Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }

  body::before {
    /* subtle animated aurora glow behind everything */
    content: "";
    position: fixed;
    inset: -10%;
    background:
      radial-gradient(var(--fx-aurora-size) at 50% -12%, color-mix(in oklab, var(--moon-accent) calc(var(--fx-aurora-alpha)*100%), transparent), transparent 60%),
      linear-gradient(180deg, var(--bg), var(--bg-elev));
    animation: auroraShift 60s linear infinite alternate;
    z-index: var(--z-below);
  }

  @keyframes auroraShift {
    0%   { transform: translateY(0) rotate(0deg) scale(1); filter: hue-rotate(0deg); }
    50%  { transform: translateY(-3%) rotate(15deg) scale(1.02); filter: hue-rotate(30deg); }
    100% { transform: translateY(2%) rotate(-10deg) scale(1); filter: hue-rotate(-30deg); }
  }

  .wrap {
    max-width: 1100px;
    margin-inline: auto;
    padding: clamp(12px,5vw,20px);
    position: relative;
    z-index: var(--z-base);
  }

  h1, h2, h3, h4, h5 {
    font-weight: var(--w-bold);
    line-height: var(--lh-tight);
    margin: 0 0 .4rem 0;
  }

  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); color: var(--muted); }

  a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
  a:hover { color: var(--accent-2); }

  .subtitle { color: var(--muted); max-width: 65ch; margin: .3rem 0 .8rem 0; }
}

/* ===================== COMPONENTS ===================== */
@layer components {
  /* Cards and Panels */
  .card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--rim);
    padding: var(--pad-lg);
    position: relative;
    transition: transform var(--t-med) var(--ease-std), box-shadow var(--t-slow) var(--ease-out);
  }

  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rim-hard);
  }

  .shine {
    background: var(--shine-linear), var(--shine-radial);
    background-blend-mode: screen;
    position: relative;
  }

  .pill, .lab-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: var(--bd-1);
    border-radius: var(--round);
    padding: .35rem .7rem;
    white-space: nowrap;
    font-weight: var(--w-semibold);
    transition: background var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std);
  }

  .pill {
    background: #0f1218;
    color: var(--ink);
  }

  .lab-btn {
    background: #111723;
    color: var(--ink);
    cursor: pointer;
  }

  .lab-btn:hover {
    background: color-mix(in oklab, var(--accent) 10%, #111723);
  }

  .lab-btn.ghost {
    background: transparent;
  }

  .formrow, .btnrow, .chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }

  input.lab-input, select.lab-input, textarea.lab-input {
    background: #0f1218;
    color: var(--ink);
    border: var(--bd-1);
    border-radius: var(--radius-sm);
    padding: .45rem .55rem;
  }

  input[type="range"].lab-input {
    width: 180px;
  }

  textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    border-radius: var(--radius);
  }

  /* Grid and Flex utilities */
  .grid {
    display: grid;
    gap: var(--gap);
  }

  .row-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
  @media (min-width:900px) {
    .row-2 { grid-template-columns: 1fr 1fr; }
  }

  /* Divider */
  .divider {
    height: 1px;
    background: var(--line);
    margin: .8rem 0;
  }

  /* Animating star twinkle overlay */
  .starfield {
    position: fixed;
    inset: 0;
    z-index: var(--z-bg);
    pointer-events: none;
    background: transparent;
    overflow: hidden;
  }
  .star {
    position: absolute;
    width: 2px; height: 2px;
    background: var(--accent);
    opacity: .4;
    border-radius: 50%;
    animation: twinkle 5s infinite ease-in-out;
  }
  @keyframes twinkle {
    0%,100% { opacity: .15; transform: scale(.8); }
    50% { opacity: .9; transform: scale(1.3); }
  }

  /* Hebrew / Verse styling */
  .hebrew {
    font-family: "Noto Serif Hebrew", serif;
    font-size: var(--fs-he-lg);
    text-align: right;
    direction: rtl;
  }

  blockquote.pull {
    font-style: italic;
    border-left: 3px solid var(--moon-accent);
    padding-left: .9rem;
    margin: .8rem 0;
  }
}

/* ===================== UTILITIES ===================== */
@layer utilities {
  .soft { opacity: .9; font-weight: var(--w-semibold); }
  .muted { color: var(--muted); }
  .mono { font-family: "JetBrains Mono", monospace; }
  .tight { margin-bottom: .25rem; }
  .kbd {
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-bd);
    border-radius: var(--kbd-radius);
    padding: .1rem .35rem;
  }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .footer {
    text-align: center;
    color: var(--muted);
    padding: var(--pad-lg);
  }

  /* Smooth fade-ins for cards and sections */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  .fadein {
    animation: fadeIn .9s var(--ease-out) both;
  }
}

.error-banner{position:sticky;top:0;z-index:1000;padding:.6rem .9rem;border:1px solid #7a2020;
background:#140b0b;color:#ffd0d0;border-radius:10px;margin:8px 16px}
.error-banner.show{display:block}