/* Cutflux design tokens - one file every page loads.
 * Source of truth: lyrc-design-system.json (the same system the beat timeline
 * skin, beat-timeline-lyrc.css, is built on). Pages map their own variables
 * onto these in a small <page>-lyrc.css; this file only sets the shared
 * tokens plus a few app-wide behaviours (page fades, focus ring, press feel).
 * Visual only - no layout or behaviour changes. */

:root {
  /* Background hierarchy: canvas < app/panel < surface < raised < hover */
  --cf-canvas: #000000;
  --cf-bg: #0A0A0D;
  --cf-panel: #0D0E13;
  --cf-timeline: #0B0C10;
  --cf-surface: #15161C;
  --cf-card: #1A1B22;
  --cf-raised: #1C1E26;
  --cf-hover: #22242E;
  --cf-input: #17181F;

  --cf-border-subtle: #1F2128;
  --cf-border: #2A2C36;
  --cf-border-strong: #3A3D4A;

  /* Text: exactly four steps */
  --cf-text: rgba(255, 255, 255, 1);
  --cf-text-2: rgba(255, 255, 255, 0.70);
  --cf-text-3: rgba(255, 255, 255, 0.50);
  --cf-text-4: rgba(255, 255, 255, 0.30);
  --cf-text-inverse: #0A0A0D;

  /* One interactive accent; the rest are status only */
  --cf-accent: #3B82F6;
  --cf-accent-hover: #5B9BFF;
  --cf-accent-active: #2F80FF;
  --cf-accent-soft: rgba(59, 130, 246, 0.14);
  --cf-warn: #F5A623;
  --cf-ok: #34D399;
  --cf-pink: #EC4899;
  --cf-new-badge: linear-gradient(90deg, #34D399 0%, #A855F7 100%);

  --cf-font: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --cf-mono: 'JetBrains Mono', monospace;
  --cf-fs-xs: 11px; --cf-fs-sm: 12px; --cf-fs-base: 13px; --cf-fs-md: 14px;
  --cf-fs-lg: 16px; --cf-fs-xl: 20px; --cf-fs-display: 28px;

  --cf-s1: 4px; --cf-s2: 8px; --cf-s3: 12px; --cf-s4: 16px;
  --cf-s5: 24px; --cf-s6: 32px; --cf-s7: 48px; --cf-s8: 64px;

  /* One radius per component type */
  --cf-r-xs: 4px; --cf-r-sm: 6px; --cf-r-md: 8px; --cf-r-lg: 12px; --cf-r-pill: 9999px;
  --cf-r-button: 6px;   /* buttons, inputs */
  --cf-r-card: 8px;     /* thumbnails, cards */
  --cf-r-panel: 12px;   /* panels, modals, sheets */

  /* Shadows only on floating things */
  --cf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --cf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --cf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --cf-focus: 0 0 0 2px rgba(59, 130, 246, 0.5);

  /* Three transitions, nothing else */
  --cf-t-fast: 120ms ease-out;
  --cf-t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --cf-t-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --cf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Arriving things decelerate, leaving things accelerate; exits ~70% as long. */
  --cf-ease-in: cubic-bezier(0, 0, 0.2, 1);
  --cf-ease-out: cubic-bezier(0.4, 0, 1, 1);
}

/* Smooth page-to-page: the browser cross-fades between Cutflux pages instead
   of flashing a blank screen or a full-screen loader. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* The bottom tab bar holds still while the page content cross-fades (the
   home bar and the tool pages' bar share one name, so it morphs in place). */
:is(body.lyrc-app, body.lyrc-be) :is(.tbar, .cf-tbar) { view-transition-name: cf-tabbar; }
::view-transition-group(cf-tabbar) { animation-duration: 200ms; }

/* Scrolling inside a sheet or dialog never drags the page behind it. */
:is(body.lyrc-app, body.lyrc-be) :is([role=dialog], [class*="sheet"], [class*="drawer"], [class*="modal"]) { overscroll-behavior: contain; }

/* Editing screens: no pull-to-refresh (an accidental drag at the top would
   reload the page and lose the edit). The home screen keeps it. */
html:has(body.lyrc-be), html:has(body.cf-copy-page), html.pm-beatshell { overscroll-behavior-y: contain; }

/* Light theme (phones; cf-theme.js sets data-theme). Same hierarchy, flipped:
   canvas is the softest grey, cards and sheets are white, text is near-black
   in the same four steps. The accent stays the one blue. */
html[data-theme="light"] {
  color-scheme: light;
  --cf-canvas: #F2F3F7;
  --cf-bg: #F7F8FB;
  --cf-panel: #FFFFFF;
  --cf-timeline: #EEF0F5;
  --cf-surface: #F1F3F7;
  --cf-card: #FFFFFF;
  --cf-raised: #FFFFFF;
  --cf-hover: #E8EBF1;
  --cf-input: #F1F3F7;

  --cf-border-subtle: #E8EAF0;
  --cf-border: #DADDE5;
  --cf-border-strong: #C3C8D3;

  --cf-text: rgba(12, 14, 22, 1);
  --cf-text-2: rgba(12, 14, 22, 0.68);
  /* 0.62 / 0.45: 5.3:1 and 3.1:1 on white (WCAG AA text / large-text). 0.50 was 3.6:1. */
  --cf-text-3: rgba(12, 14, 22, 0.62);
  --cf-text-4: rgba(12, 14, 22, 0.45);
  --cf-text-inverse: #FFFFFF;

  --cf-accent: #2563EB;
  --cf-accent-hover: #1D4FD8;
  --cf-accent-active: #1E40AF;
  --cf-accent-soft: rgba(37, 99, 235, 0.10);
  /* status colours re-inked for white: the dark-theme greens/ambers were 1.9:1 on white */
  --cf-ok: #047857;
  --cf-warn: #B45309;
  --cf-pink: #DB2777;

  --cf-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --cf-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --cf-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  --cf-focus: 0 0 0 2px rgba(37, 99, 235, 0.35);
}

html { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(59, 130, 246, 0.35); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--cf-focus); }

/* One press feel everywhere: an instant shrink on touch (needs the touchstart
   listener in cutflux-page-loader.js or iOS Safari never fires :active) and a
   slower release. Cards get a gentler shrink than buttons. */
:where(body:not(.lyrc-tokens)) :where(button, [role=button], a.btn, .btn, label[for]):not(:disabled):active { transform: scale(0.97); transition: transform 60ms ease-out; }
:where(body:not(.lyrc-tokens)) :where(.card, [class*="-card"], [class*="tile"]):active { transform: scale(0.985); transition: transform 60ms ease-out; }
:where(body:not(.lyrc-tokens)) :where(button, [role=button], a.btn, .btn, label[for], .card, [class*="-card"], [class*="tile"]) { transition: transform 200ms cubic-bezier(0, 0, 0.2, 1); }

/* Sticky headers and tab bars sit over scrolling content; frosted blur there
   is a known iOS stutter source. Solid app background instead. (Caption
   "glass" styles are part of the video's look and are not touched.) */
:is(body.lyrc-app, body.lyrc-be) :is(.hdr, .tbar, .cf-tbar, .cf-copy-bar) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: #0A0A0D !important;
}

/* Thin top bar shown only when a page takes a moment to open
   (cutflux-page-loader.js). Replaces the old full-screen ripple overlay. */
.cf-navbar {
  position: fixed; top: 0; left: 0; z-index: 100001; height: 2px; width: 0;
  background: var(--cf-accent); box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
  opacity: 0; pointer-events: none;
  transition: width 1.6s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cf-navbar.is-on { opacity: 1; width: 82%; }
.cf-navbar.is-done { opacity: 0; width: 100%; transition: width 120ms ease-out, opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 80ms; }

/* Skeleton shimmer for anything still loading */
.cf-skel {
  background: linear-gradient(90deg, var(--cf-surface) 0%, var(--cf-hover) 50%, var(--cf-surface) 100%);
  background-size: 200% 100%;
  animation: cfSkel 1.2s linear infinite;
  border-radius: var(--cf-r-card);
}
@keyframes cfSkel { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .cf-skel { animation: none; }
}