/* ============================================================
   POS REDESIGN — Theme-Adaptive Token Layer
   Bridges the existing theme system (7 themes via [data-color-scheme])
   to a unified surface vocabulary used by the new components.
   Every value derives from theme variables — themes JUST WORK.
   ============================================================ */

:root {
  /* Universal fallbacks; each theme overrides primary/background/text/etc */
  --color-primary: oklch(58% 0.10 200);
  --color-background: oklch(98% 0.005 90);
  --color-surface: oklch(100% 0 0);
  --color-text: oklch(20% 0.02 220);
  --color-text-secondary: oklch(45% 0.01 220);
  --color-border: oklch(85% 0.01 90);
  --color-success: oklch(60% 0.13 165);
  --color-error: oklch(55% 0.20 25);
  --color-warning: oklch(70% 0.15 60);

  /* Derived surface vocabulary — works against any theme */
  --pos-surface-1: var(--color-background);
  --pos-surface-2: var(--color-surface);
  --pos-surface-3: color-mix(in oklab, var(--color-surface) 92%, var(--color-text));
  --pos-surface-raised: var(--color-surface);
  --pos-overlay: color-mix(in oklab, var(--color-text) 60%, transparent);
  --pos-divider: color-mix(in oklab, var(--color-border) 70%, transparent);
  --pos-hover: color-mix(in oklab, var(--color-text) 6%, transparent);
  --pos-active: color-mix(in oklab, var(--color-primary) 12%, transparent);
  --pos-tint: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
  --pos-tint-strong: color-mix(in oklab, var(--color-primary) 16%, var(--color-surface));

  /* Type */
  --pos-font-display: var(--font-family-display, 'Syne', system-ui, sans-serif);
  --pos-font-body: var(--font-family-base, 'DM Sans', system-ui, sans-serif);
  --pos-font-mono: var(--font-family-mono, 'JetBrains Mono', ui-monospace, monospace);

  /* Scale (touch-friendly minimums) */
  --pos-touch-min: 48px;
  --pos-touch-comfort: 56px;
  --pos-touch-large: 72px;

  /* Radii */
  --pos-radius-sm: 8px;
  --pos-radius: 12px;
  --pos-radius-lg: 16px;
  --pos-radius-xl: 24px;

  /* Shadows */
  --pos-shadow-sm: 0 1px 2px color-mix(in oklab, var(--color-text) 8%, transparent);
  --pos-shadow: 0 4px 16px color-mix(in oklab, var(--color-text) 10%, transparent);
  --pos-shadow-lg: 0 12px 40px color-mix(in oklab, var(--color-text) 16%, transparent);
  --pos-glow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 22%, transparent);

  /* Motion */
  --pos-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pos-fast: 140ms;
  --pos-mid: 240ms;

  /* Status flavors derived from semantic tokens */
  --pos-tint-success: color-mix(in oklab, var(--color-success) 18%, transparent);
  --pos-tint-error:   color-mix(in oklab, var(--color-error)   18%, transparent);
  --pos-tint-warning: color-mix(in oklab, var(--color-warning) 22%, transparent);

  --pos-chip-success-bg: color-mix(in oklab, var(--color-success) 22%, transparent);
  --pos-chip-error-bg:   color-mix(in oklab, var(--color-error)   22%, transparent);
  --pos-chip-warning-bg: color-mix(in oklab, var(--color-warning) 26%, transparent);

  /* Accessibility scale (driven by user prefs panel) */
  --a11y-font-scale: 1;
  --a11y-image-scale: 1;
  --a11y-touch-scale: 1;
}

/* ── Accessibility scale classes ─────────────────────────────── */
html.a11y-large    { --a11y-font-scale: 1.18; --a11y-touch-scale: 1.15; }
html.a11y-xlarge   { --a11y-font-scale: 1.35; --a11y-touch-scale: 1.30; }
html.a11y-huge     { --a11y-font-scale: 1.55; --a11y-touch-scale: 1.45; }
html.a11y-images   { --a11y-image-scale: 1.4; }
html.a11y-high-contrast {
  --pos-divider: var(--color-border);
  --color-text-secondary: var(--color-text);
}
html.a11y-max-contrast {
  --pos-divider: var(--color-border);
  --color-text-secondary: var(--color-text);
  filter: contrast(1.4) saturate(1.2);
}
html.a11y-reduce-motion * {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
html.a11y-dyslexic,
html.a11y-dyslexic * {
  font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
}
html.a11y-underline-links a { text-decoration: underline !important; }
html.a11y-big-cursor,
html.a11y-big-cursor * { cursor: zoom-in !important; }

/* tbay theme bridge */
[data-color-scheme="tbay"] {
  --color-primary: var(--c-primary, oklch(70% 0.14 195));
}

/* ─── Skeleton + shimmer ──────────────────────────────────────── */
@keyframes pos-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pos-skeleton {
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-text) 8%, transparent) 0%,
    color-mix(in oklab, var(--color-text) 14%, transparent) 50%,
    color-mix(in oklab, var(--color-text) 8%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: pos-shimmer 1.4s linear infinite;
  border-radius: var(--pos-radius-sm);
  display: block;
}
@keyframes pos-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.pos-pulsing { animation: pos-pulse 1.6s ease-in-out infinite; }

/* Tap ripple */
@keyframes pos-ripple {
  to { transform: scale(2.5); opacity: 0; }
}
.pos-tappable { position: relative; overflow: hidden; isolation: isolate; }
.pos-tappable::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 50%, transparent);
  opacity: 0; transform: scale(0);
  pointer-events: none;
}
.pos-tappable:active::after {
  opacity: 1;
  animation: pos-ripple 480ms var(--pos-ease) forwards;
}

/* Inline mini-spinner */
@keyframes pos-spin { to { transform: rotate(360deg); } }
.pos-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid color-mix(in oklab, var(--color-text) 20%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: pos-spin 700ms linear infinite;
}

/* Three dots progress */
@keyframes pos-dot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.pos-dots { display: inline-flex; gap: 4px; align-items: center; }
.pos-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  animation: pos-dot 1.2s ease-in-out infinite;
}
.pos-dots span:nth-child(2) { animation-delay: 0.15s; }
.pos-dots span:nth-child(3) { animation-delay: 0.30s; }

/* ============================================================
   Per-layout token overrides (appended for design system).
   ============================================================ */

/* Layout-level tokens (defaults; each layout scope re-declares) */
:root {
  --ll-radius-sm: 6px;
  --ll-radius:    10px;
  --ll-radius-lg: 14px;
  --ll-radius-pill: 999px;

  --ll-density: 1;
  --ll-pad-card: 16px;
  --ll-pad-cell: 8px 12px;

  --ll-fs-base: 14px;
  --ll-fs-h1:   22px;
  --ll-fs-h2:   16px;
  --ll-fs-label: 11px;
  --ll-fs-small: 12px;

  --ll-touch-min:   44px;
  --ll-btn-height:  40px;
  --ll-input-height: 40px;

  --ll-stroke: 1px;
  --ll-shadow: 0 1px 2px color-mix(in oklab, var(--color-text) 8%, transparent);
  --ll-shadow-elev: 0 12px 40px color-mix(in oklab, var(--color-text) 16%, transparent);
  --ll-card-border: 1px solid var(--color-border);
  --ll-card-bg: var(--color-surface);

  --ll-font-display: var(--pos-font-display, var(--font-family-display, 'Syne', sans-serif));
  --ll-font-body:    var(--pos-font-body, var(--font-family-base, 'DM Sans', sans-serif));
  --ll-font-mono:    var(--pos-font-mono, 'JetBrains Mono', monospace);

  --ll-letter-spacing-head: -0.01em;
  --ll-uppercase-labels: none;
  --ll-table-stripe: transparent;

  --ll-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ll-motion: 180ms;
}

/* ===== CLASSIC ===== — pragmatic, low-chrome, current look */
.layout-classic {
  --ll-radius-sm: 4px;
  --ll-radius:    6px;
  --ll-radius-lg: 10px;
  --ll-radius-pill: 999px;

  --ll-density: 1;
  --ll-pad-card: 16px;
  --ll-pad-cell: 8px 12px;

  --ll-fs-base: 14px;
  --ll-fs-h1:   22px;
  --ll-fs-h2:   16px;
  --ll-fs-label: 12px;
  --ll-fs-small: 12px;

  --ll-touch-min:   36px;
  --ll-btn-height:  38px;
  --ll-input-height: 38px;

  --ll-stroke: 1px;
  --ll-shadow: 0 1px 2px color-mix(in oklab, var(--color-text) 6%, transparent);
  --ll-shadow-elev: 0 8px 24px color-mix(in oklab, var(--color-text) 12%, transparent);

  --ll-font-display: var(--ll-font-body);
  --ll-letter-spacing-head: 0;
  --ll-uppercase-labels: none;
  --ll-table-stripe: transparent;
}

/* ===== A — CALM ===== — tablet-first, soft surfaces, display type */
.layout-a {
  --ll-radius-sm: 8px;
  --ll-radius:    14px;
  --ll-radius-lg: 20px;
  --ll-radius-pill: 999px;

  --ll-density: 1.10;
  --ll-pad-card: 22px;
  --ll-pad-cell: 14px 18px;

  --ll-fs-base: 15px;
  --ll-fs-h1:   28px;
  --ll-fs-h2:   18px;
  --ll-fs-label: 12px;
  --ll-fs-small: 13px;

  --ll-touch-min:   48px;
  --ll-btn-height:  48px;
  --ll-input-height: 48px;

  --ll-stroke: 1px;
  --ll-shadow: 0 1px 3px color-mix(in oklab, var(--color-text) 5%, transparent);
  --ll-shadow-elev: 0 12px 40px color-mix(in oklab, var(--color-text) 14%, transparent);

  --ll-font-display: var(--pos-font-display, 'Syne', sans-serif);
  --ll-letter-spacing-head: -0.02em;
  --ll-uppercase-labels: none;
  --ll-table-stripe: transparent;
}

/* ===== B — PRO ===== — dense terminal aesthetic, mono, hard edges */
.layout-b {
  --ll-radius-sm: 3px;
  --ll-radius:    4px;
  --ll-radius-lg: 6px;
  --ll-radius-pill: 4px; /* no pills in pro */

  --ll-density: 0.85;
  --ll-pad-card: 10px 12px;
  --ll-pad-cell: 4px 8px;

  --ll-fs-base: 12px;
  --ll-fs-h1:   16px;
  --ll-fs-h2:   13px;
  --ll-fs-label: 10px;
  --ll-fs-small: 11px;

  --ll-touch-min:   32px;
  --ll-btn-height:  30px;
  --ll-input-height: 30px;

  --ll-stroke: 1px;
  --ll-shadow: none;
  --ll-shadow-elev: 0 8px 24px rgba(0,0,0,0.30);

  --ll-font-display: var(--pos-font-mono, 'JetBrains Mono', monospace);
  --ll-font-body:    var(--pos-font-mono, 'JetBrains Mono', monospace);
  --ll-letter-spacing-head: 0.02em;
  --ll-uppercase-labels: uppercase;
  --ll-table-stripe: color-mix(in oklab, var(--color-text) 4%, transparent);
}

/* ===== C — ADAPTIVE ===== — touch-first, springy motion */
.layout-c {
  --ll-radius-sm: 8px;
  --ll-radius:    12px;
  --ll-radius-lg: 16px;
  --ll-radius-pill: 999px;

  --ll-density: 1;
  --ll-pad-card: 16px;
  --ll-pad-cell: 10px 14px;

  --ll-fs-base: 14px;
  --ll-fs-h1:   22px;
  --ll-fs-h2:   16px;
  --ll-fs-label: 12px;
  --ll-fs-small: 13px;

  --ll-touch-min:   50px;
  --ll-btn-height:  50px;
  --ll-input-height: 50px;

  --ll-stroke: 1px;
  --ll-shadow: 0 2px 8px color-mix(in oklab, var(--color-text) 8%, transparent);
  --ll-shadow-elev: 0 16px 48px color-mix(in oklab, var(--color-text) 18%, transparent);

  --ll-font-display: var(--pos-font-display, 'Syne', sans-serif);
  --ll-letter-spacing-head: -0.01em;
  --ll-uppercase-labels: none;
  --ll-table-stripe: transparent;
  --ll-motion: 220ms;
  --ll-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring */
}