/* Phonely app runtime · faithful port of palvar-ai-os/src/index.css
 * (the parts that aren't expressible as Tailwind config: keyframes,
 *  @layer components, dark-mode overrides, scrollbar). Loaded alongside
 *  the Tailwind Play CDN, whose config carries fonts/colors/shadows/animations. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   WAVE 1 — Central design token layer (CSS variables).
   Mirrors the semantic Tailwind tokens in index.html so later runtime
   components can consume either Tailwind utilities OR these variables.
   PURELY DEFINING — these change nothing until a component opts in. Existing
   utilities/pages are unaffected.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* surfaces */
  --ui-surface-app: #F8FAFC;
  --ui-surface-raised: #FFFFFF;
  --ui-surface-sunken: #F1F5F9;
  --ui-surface-overlay: rgba(2, 6, 23, 0.55);
  --ui-surface-sidebar: #020617;
  --ui-surface-topbar: #FFFFFF;
  /* text */
  --ui-text-strong: #0F172A;
  --ui-text: #334155;
  --ui-text-muted: #64748B;
  --ui-text-subtle: #64748B;
  --ui-text-inverse: #FFFFFF;
  /* borders */
  --ui-border: #E2E8F0;
  --ui-border-subtle: #F1F5F9;
  --ui-border-strong: #CBD5E1;
  --ui-border-inverse: rgba(255, 255, 255, 0.08);
  /* brand & accent — ONE primary system: indigo */
  --ui-brand: #4F46E5;
  --ui-brand-hover: #4338CA;
  --ui-brand-soft: #EEF2FF;
  --ui-accent: #0EA5E9;
  --ui-accent-soft: #E0F2FE;
  /* status */
  --ui-success: #059669; --ui-success-soft: #ECFDF5;
  --ui-warning: #B45309; --ui-warning-soft: #FFFBEB;
  --ui-danger:  #BE123C; --ui-danger-soft:  #FFE4E6;
  --ui-info:    #4F46E5; --ui-info-soft:    #EEF2FF;
  /* spacing & layout */
  --ui-page-padding-mobile: 1rem;
  --ui-page-padding-tablet: 1.5rem;
  --ui-page-padding-desktop: 2.5rem;
  --ui-card-padding-sm: 1.25rem;
  --ui-card-padding-md: 1.5rem;
  --ui-card-padding-lg: 2rem;
  --ui-section-gap-tight: 2rem;
  --ui-section-gap: 3rem;
  --ui-section-gap-loose: 4rem;
  --ui-content-max: 1440px;
  --ui-content-wide: 1760px;
  /* radius */
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-radius-xl: 28px;
  --ui-radius-card: 24px;
  --ui-radius-panel: 32px;
  --ui-radius-pill: 9999px;
  /* typography */
  --ui-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui-font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ui-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-text-body: 1rem;
  --ui-text-body-sm: 0.875rem;
  --ui-text-caption: 0.75rem;
  --ui-text-label: 0.8125rem;
  --ui-text-h1: 2rem;
  --ui-text-h2: 1.5rem;
  --ui-text-h3: 1.25rem;
  --ui-line-body: 1.6;
  --ui-line-heading: 1.15;
  /* elevation */
  --ui-shadow-card: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
  --ui-shadow-card-hover: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --ui-shadow-panel: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 8px 24px -8px rgba(15, 23, 42, 0.08);
  --ui-shadow-floating: 0 8px 28px -6px rgba(15, 23, 42, 0.14);
  --ui-shadow-modal: 0 24px 60px -12px rgba(15, 23, 42, 0.30);
  /* motion */
  --ui-duration-fast: 120ms;
  --ui-duration-base: 200ms;
  --ui-duration-slow: 320ms;
  --ui-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Box model — matches Tailwind preflight; harmless to restate. */
*, *::before, *::after { box-sizing: border-box; }

/* ── base ──────────────────────────────────────────────── */
/* Decorative background "orbs" are intentionally oversized (w-[760px], negative
   offsets) and bleed off-screen. On narrow viewports they widened the document
   and clipped real content. `overflow-x: clip` contains them WITHOUT creating a
   scroll container, so the fixed nav, sticky elements and vertical scroll all
   keep working (unlike `overflow-x: hidden`). */
html, body { overflow-x: clip; }

/* In-page anchor jumps must clear the ~88px fixed nav; smooth scroll unless the
   user prefers reduced motion. Applies site-wide. */
html { scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Consistent keyboard focus across the whole app. Many interactive elements use
   Tailwind `outline-none`; `el:focus-visible` (specificity 0,1,1) outranks the
   `.outline-none` utility (0,1,0), so a ring shows on KEYBOARD focus only — never
   on mouse click. Outline follows each element's own border-radius in modern
   browsers, so we never alter the element's shape. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 1px;
}
body {
  background-color: var(--ui-surface-app);
  color: var(--ui-text-strong);
  font-family: var(--ui-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
}
::selection { background: #e0e7ff; color: #312e81; }

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.015em;
}
.tracking-widest, .uppercase.tracking-widest {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700;
}
button, a, select, [role="button"], .cursor-pointer, label[for] { cursor: pointer !important; }

/* ── keyframes (mirror @theme --animate-*) ─────────────── */
@keyframes wave    { 0%,100% { height: 8px; } 50% { height: 24px; } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fadeIn  { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-wave    { animation: wave 2s ease-in-out infinite; }
.animate-shimmer { animation: shimmer 2s linear infinite; }
.animate-float   { animation: float 6s ease-in-out infinite; }
.animate-fade-in { animation: fadeIn 0.8s ease-out forwards; }
/* Safety: never let a one-shot entrance hide content (animations pause when the
   preview tab is unfocused, which would otherwise leave fade-ins at opacity:0). */
.animate-fade-in { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in, .animate-wave, .animate-shimmer, .animate-float { animation: none !important; }
  .glass-card, .glass-card::before { transition: none !important; }
  /* Canonical opt-in reduced-motion guard (media-gated; no effect for default
     users). Neutralises framer-motion/Tailwind transitions for users who ask
     for reduced motion — covers the cases the four keyframe classes above miss. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── @layer components ─────────────────────────────────── */
.glass-card {
  background: #fff;
  border: 1px solid #f1f5f9;
  box-shadow: 0 2px 10px -4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02);
  border-radius: 32px;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.glass-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(to bottom right, rgba(238,242,255,0.3), transparent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.glass-card:hover {
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08), 0 0 0 1px rgba(99,102,241,0.2);
  transform: translateY(-0.25rem);
}
.glass-card:hover::before { opacity: 1; }

/* Brand gradient text — referenced on several marketing pages but previously
   undefined (rendered as plain dark text). Indigo→sky, on-brand (never the
   purple/pink "AI gradient" the Trust & Authority pattern warns against). */
.ai-gradient-text {
  background-image: linear-gradient(120deg, #4f46e5 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nav-blur {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid #f1f5f9;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.tech-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  font-weight: 700;
}

/* Eyebrow contrast: slate-400 (#94a3b8) on light surfaces is ~2.6:1 — fails
   WCAG AA. Bump the mono/uppercase eyebrow pattern to slate-500 (#64748b,
   ~4.8:1 — passes). High specificity (3 classes) overrides the text-slate-400
   utility; colour-themed eyebrows (indigo/sky/etc.) are not slate-400 so are
   left untouched. slate-500 still passes AA on dark slate-950 surfaces. */
.uppercase.tracking-widest.text-slate-400,
.uppercase.tracking-wider.text-slate-400,
.font-mono.uppercase.text-slate-400 { color: #64748b; }

/* ── dark-mode overrides (verbatim from source) ────────── */
.dark { color-scheme: dark; }
.dark body { background-color: #030712 !important; color: #f1f5f9 !important; }
.dark .bg-white { background-color: #0b1120 !important; }
.dark .glass-card {
  background: linear-gradient(135deg, rgba(15,23,42,0.6) 0%, rgba(30,41,59,0.4) 100%) !important;
  border-color: rgba(99,102,241,0.15) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.dark .glass-card:hover {
  border-color: rgba(99,102,241,0.4) !important;
  box-shadow: 0 10px 40px rgba(99,102,241,0.1), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.dark .bg-slate-50  { background-color: #0c1524 !important; }
.dark .bg-slate-100 { background-color: #1e293b !important; }
.dark .bg-slate-200 { background-color: #334155 !important; }
.dark .bg-slate-900 { background-color: #030712 !important; }
.dark .text-slate-900, .dark .text-slate-950, .dark .text-slate-800 { color: #f8fafc !important; }
.dark .text-slate-700, .dark .text-slate-600 { color: #cbd5e1 !important; }
.dark .text-slate-500, .dark .text-slate-400 { color: #94a3b8 !important; }
.dark .text-slate-300 { color: #64748b !important; }
.dark aside  { background-color: #020617 !important; border-right: 1px solid rgba(255,255,255,0.04) !important; }
.dark header { background-color: rgba(3,7,18,0.8) !important; backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(255,255,255,0.04) !important; }

/* ── Wave-1 opt-in layout helpers (apply ONLY where the class is added; no
   global element selectors, so existing pages are untouched until later waves
   adopt them). ── */
.ui-container {
  width: 100%;
  max-width: var(--ui-content-max);
  margin-inline: auto;
  padding-inline: var(--ui-page-padding-mobile);
}
.ui-container--wide { max-width: var(--ui-content-wide); }
@media (min-width: 768px)  { .ui-container { padding-inline: var(--ui-page-padding-tablet); } }
@media (min-width: 1024px) { .ui-container { padding-inline: var(--ui-page-padding-desktop); } }
.ui-page { padding-block: var(--ui-page-padding-mobile); }
@media (min-width: 1024px) { .ui-page { padding-block: var(--ui-page-padding-desktop); } }
.ui-section + .ui-section { margin-top: var(--ui-section-gap); }
.ui-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Wave-2 app-shell helpers (opt-in only; applied where the class is added,
   no global element selectors → existing pages are untouched). Driven entirely
   by the Wave-1 --ui-* tokens. ── */

/* Central content clamp for dashboard pages: one max-width + one responsive
   padding rhythm (mobile 1rem → tablet 1.5rem → desktop 2rem) instead of every
   page repeating px-4/px-6/lg:px-8. */
.ui-page-container {
  width: 100%;
  max-width: var(--ui-content-max);     /* 1440px */
  margin-inline: auto;
  padding-inline: var(--ui-page-padding-mobile);
  padding-block: var(--ui-page-padding-mobile);
}
.ui-page-container--wide { max-width: var(--ui-content-wide); }   /* 1760px — operative wide layouts */
@media (min-width: 768px) {
  .ui-page-container { padding-inline: var(--ui-page-padding-tablet); padding-block: var(--ui-page-padding-tablet); }
}
@media (min-width: 1280px) {
  .ui-page-container { padding-inline: var(--ui-page-padding-desktop); padding-block: var(--ui-page-padding-desktop); }
}

/* ── Wave-3 UI-Kit: only the skeleton needs CSS (shimmer + reduced-motion +
   pseudo-element) that Tailwind utilities can't express cleanly. All other kit
   components are styled purely via Wave-1 token utilities inline. Opt-in class,
   no global element selectors. ── */
.ui-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--ui-surface-sunken);
}
@media (prefers-reduced-motion: no-preference) {
  .ui-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: ui-shimmer 1.4s ease-in-out infinite;
  }
}
@keyframes ui-shimmer { 100% { transform: translateX(100%); } }

/* ── scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }

/* ════════════════════════════════════════════════════════════════════
   Phonely Dynamic Frontend Quality Bar — opt-in interaction / typography /
   layout utilities. All class-based & additive; NO element overrides, NO
   !important, NO global side effects. Motion stays 140–280ms ease-out and is
   neutralised by the reduced-motion guard. Typography utilities are
   COLOUR-AGNOSTIC (size/weight/tracking only) so they compose with the
   existing token text-colour classes and stay dark-mode correct. Nothing here
   affects any element unless a class is explicitly added in markup.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --motion-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* ease-out-quart — premium, no bounce */
  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Interaction utilities */
.ui-interactive { cursor: pointer; transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), background-color var(--motion-base) var(--ease-out); }
.ui-card-hover { transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out); }
.ui-card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(15, 23, 42, 0.20); }
.ui-lift { transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
.ui-lift:hover { transform: translateY(-1px); }
.ui-press { transition: transform var(--motion-fast) var(--ease-out); }
.ui-press:active { transform: scale(0.97); }
.ui-focus-ring:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.ui-reveal-actions .ui-reveal-target { opacity: 0; transition: opacity var(--motion-base) var(--ease-out); }
.ui-reveal-actions:hover .ui-reveal-target,
.ui-reveal-actions:focus-within .ui-reveal-target { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .ui-soft-enter { animation: ui-soft-enter var(--motion-slow) var(--ease-out) both; }
  @keyframes ui-soft-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* reduced motion: keep state, drop positional shift + forced-reveal so keyboard/AT users still see actions */
@media (prefers-reduced-motion: reduce) {
  .ui-card-hover:hover, .ui-lift:hover, .ui-press:active { transform: none; }
  .ui-reveal-actions .ui-reveal-target { opacity: 1; }
}

/* Typography utilities — colour-agnostic (compose with token text-colour classes) */
.ui-text-kicker  { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.ui-text-label   { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.ui-text-caption { font-size: 12px; font-weight: 500; line-height: 1.45; }
.ui-text-meta    { font-size: 12px; font-weight: 500; }
.ui-text-body    { font-size: 14px; line-height: 1.55; }
.ui-text-strong  { font-size: 14px; font-weight: 600; }

/* Layout utilities */
.ui-section-stack > * + * { margin-top: 1.5rem; }
.ui-detail-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .ui-detail-grid { grid-template-columns: minmax(280px, 360px) 1fr; } }
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ui-responsive-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }