/* ============================================================
   SHARRIEFF HALL — "CRYSTAL GLASS" DESIGN SYSTEM
   Single source of truth. index.html and design-system.html both
   link this file; neither defines its own colors, type or motion.

   Concept: the language of the edit bay — timecode, safe-frame
   crop-marks, the slate, the tally light — on a white, frosted-glass
   surface lit by the warm crystal glow that lives inside the SH mark.

   Rule of the system: the page is white and quiet. The glow is the
   only color, and it appears only where something is live, active,
   or worth your eye.

   Values here are taken from index.html as authored — the site is
   canonical, this file just makes it reusable.
   ============================================================ */

:root {
  /* ---- Neutrals ----
     Warm near-black ink on white. The warmth lives in the glow and
     in the faintest cast of the ground — the page still reads white. */
  --paper:     #FFFFFF;
  --paper-2:   #F7F2EC;   /* recessed wells */
  --surface:   #FFFFFF;   /* raised cards */
  --ink:       #1A1510;   /* headings / primary text */
  --ink-soft:  #5A5248;   /* secondary text     — 7.3:1 on paper */
  --ink-faint: #837A6D;   /* captions / labels  — 4.7:1, passes AA
                             (raised from #9A9184, which was 2.9:1 and
                             failed on .melthint and card role labels) */

  --line:   rgba(70,45,20,.10);
  --line-2: rgba(70,45,20,.16);

  /* the page ground — white falling off to the faintest warm cast */
  --ground: radial-gradient(125% 85% at 50% -12%,
              #FFFFFF 0%, #FCF8F3 44%, #F5EFE7 76%, #EFE7DD 100%);

  /* ---- Accent : the crystal glow, sampled from the SH mark ----
     ACCESSIBILITY RULE: --acc is 3.3:1 on white, so it is for large
     type, icons, rules and fills only. Small text uses --acc-deep
     (4.9:1). Never set small copy in --acc or --acc-bright. */
  --acc:        #EE6A16;
  --acc-bright: #FF9A3D;
  --acc-deep:   #C24E08;
  --glow:       255,138,45;   /* rgb, for radial blooms */
  --glow-a:     0.30;         /* bloom opacity on light */

  /* ---- Glass : frosted surfaces float above the ground ---- */
  --glass:      rgba(255,255,255,.6);
  --glass-2:    rgba(255,255,255,.4);
  --glass-brd:  rgba(255,255,255,.9);
  --glass-blur: 10px;

  /* ---- Shadows — warm-cast, never blue. Blue fights the glow. ---- */
  --sh-card:       0 20px 50px -30px rgba(120,70,20,.4),
                   inset 0 1px 0 rgba(255,255,255,.8);
  --sh-card-hover: 0 34px 70px -30px rgba(120,70,20,.5);
  --sh-glass:      0 40px 90px -36px rgba(120,70,20,.45),
                   0 8px 30px -18px rgba(120,70,20,.3),
                   inset 0 1px 0 rgba(255,255,255,.9);
  --sh-glow:       0 10px 34px -10px rgba(var(--glow),.8);

  /* ---- Type : three voices, clear roles ----
     Sora carries the page — light for display, medium for UI.
     Plex Mono keeps the technical marks honest (timecode, labels).
     Newsreader italic is the third voice, reserved for ledes and the
     single flourish word. Currently used on the system page only. */
  --f:       "Sora", system-ui, sans-serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, monospace;
  --f-serif: "Newsreader", Georgia, serif;

  /* ---- Radii — two scales, on purpose.
     Chrome is broadcast-square; glass panels are soft. ---- */
  --r-sm:    6px;    /* tags, chips, timecode plates */
  --r-md:    12px;   /* media inside a glass frame */
  --r-glass: 18px;   /* large frosted panels, cards */
  --r-pill:  999px;

  /* ---- Space — 4-point rhythm, so nothing lands off-beat ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 20px;
  --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px;

  /* ---- Motion — deliberate, eased, never busy ---- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .25s;
  --dur:      .4s;
  --dur-slow: .6s;

  color-scheme: light;
}

/* ---- BASE ---- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f);
  color: var(--ink);
  background: var(--ground);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc); color: #fff; }

/* ---- SHARED PRIMITIVES ----
   Anything used by more than one page lives here, not in a page. */

/* the safe frame */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 60px);
}

/* thin technical frame + crop-mark corners (broadcast safe-frame motif) */
.hframe {
  position: absolute; inset: 20px;
  border: 1px solid var(--line);
  z-index: 6; pointer-events: none; border-radius: var(--r-sm);
}
.cx { position: absolute; width: 14px; height: 14px; z-index: 7; pointer-events: none; }
.cx::before, .cx::after { content: ""; position: absolute; background: var(--line-2); }
.cx::before { left: 0; top: 6px; width: 14px; height: 1px; }
.cx::after  { top: 0; left: 6px; height: 14px; width: 1px; }
.cx.tl { top: 13px; left: 13px; }
.cx.tr { top: 13px; right: 13px; }
.cx.bl { bottom: 13px; left: 13px; }
.cx.br { bottom: 13px; right: 13px; }

/* the tally light */
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 10px 1px rgba(var(--glow), .9);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--glow), .6); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--glow), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--glow), 0); }
}

/* eyebrow — section number + label */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc-deep);
  margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.eyebrow .n { color: var(--ink-faint); }

/* buttons */
.btn {
  font-family: var(--f); font-weight: 500; font-size: 15px;
  letter-spacing: .01em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease),
              background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn .arw { transition: transform var(--dur) var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover {
  background: var(--acc-deep); color: #fff;
  box-shadow: var(--sh-glow), 0 0 0 1px rgba(var(--glow), .25);
  transform: translateY(-2px);
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--acc); color: var(--acc-deep); transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* tags */
.tag {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--ink-soft);
}
.tag--live  { border-color: transparent; background: rgba(var(--glow), .16); color: var(--acc-deep); }
.tag--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* accessible skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}