/*  SpineOS  |  Shared Design Tokens
    -----------------------------------------------
    Single source of truth for color, typography,
    spacing, elevation, motion, and component tokens
    across every SpineOS surface.
    Import this file first; each app layer can override
    a small subset (e.g. --heading-font for editorial).
*/

:root {
  /* ---- Palette ---- */
  --bg:             #f4f6f8;
  --surface:        rgba(255, 255, 255, 0.86);
  --surface-strong: #ffffff;
  --surface-muted:  rgba(247, 249, 252, 0.92);
  --line:           rgba(15, 23, 42, 0.10);
  --line-strong:    rgba(15, 23, 42, 0.20);

  /* ---- Typography ---- */
  --ink:            #0f172a;
  --muted:          #4a5568;                       /* AAA 7:1 on #f4f6f8 */
  --font-sans:      "SF Pro Display", "SF Pro Text", -apple-system,
                    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      "SF Mono", "SFMono-Regular", Menlo, monospace;
  --heading-font:   var(--font-sans);              /* apps can override */

  /* ---- Type scale ---- */
  --text-xs:        0.75rem;                       /* 12px — badges, fine print */
  --text-sm:        0.8125rem;                     /* 13px — captions, metadata */
  --text-base:      0.875rem;                      /* 14px — body, inputs (WCAG min) */
  --text-md:        1rem;                          /* 16px — prominent body */
  --text-lg:        1.125rem;                      /* 18px — section headings */
  --text-xl:        1.5rem;                        /* 24px — page sections */
  --text-2xl:       2rem;                          /* 32px — page headings */
  --text-3xl:       2.5rem;                        /* 40px — hero headings */

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Brand / Accent ---- */
  --accent:         #0f766e;
  --accent-soft:    rgba(15, 118, 110, 0.10);
  --accent-ink:     #0b5f5f;
  --accent-hover:   rgba(15, 118, 110, 0.16);

  /* ---- Interactive (blue) — links, focus rings ---- */
  --interactive:       #0a84ff;
  --interactive-soft:  rgba(10, 132, 255, 0.10);
  --interactive-ink:   #0062d6;

  /* ---- Semantic ---- */
  --success:        #2f7d56;
  --success-soft:   rgba(47, 125, 86, 0.10);
  --warning:        #c06a1b;
  --warning-soft:   rgba(192, 106, 27, 0.10);
  --danger:         #b94d48;
  --danger-soft:    rgba(185, 77, 72, 0.08);
  --error:          #dc2626;

  /* ---- Elevation ---- */
  --shadow-xs:      0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-sm:      0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow:         0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg:      0 16px 48px rgba(15, 23, 42, 0.10);
  --shadow-xl:      0 24px 64px rgba(15, 23, 42, 0.14);

  /* ---- Z-index scale ---- */
  --z-base:         0;
  --z-dropdown:     10;
  --z-sticky:       20;
  --z-overlay:      30;
  --z-modal:        40;
  --z-toast:        50;
  --z-tooltip:      60;

  /* ---- Radii ---- */
  --radius-xs:      12px;
  --radius-sm:      16px;
  --radius-md:      20px;
  --radius-lg:      24px;
  --radius-xl:      30px;
  --radius-pill:    999px;

  /* ---- Spacing ---- */
  --gap-xs:         8px;
  --gap-sm:         12px;
  --gap-md:         16px;
  --gap:            20px;
  --gap-lg:         28px;
  --gap-xl:         36px;
  --gap-2xl:        48px;

  /* ---- Motion ---- */
  --duration-fast:   100ms;
  --duration-base:   160ms;
  --duration-slow:   300ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease:            var(--duration-base) var(--ease-default);

  /* ---- Focus & accessibility ---- */
  --focus-ring:        0 0 0 3px var(--accent-soft);
  --focus-ring-offset: 0 0 0 1px var(--surface), 0 0 0 4px var(--accent-soft);
  --focus-outline:     2px solid var(--accent);

  /* ---- Component tokens: Inputs ---- */
  --input-bg:          var(--surface-strong);
  --input-border:      var(--line-strong);
  --input-focus-border: var(--accent);
  --input-padding:     12px 14px;
  --input-radius:      var(--radius-sm);
  --input-font-size:   var(--text-base);

  /* ---- Component tokens: Buttons ---- */
  --btn-padding-sm:    6px 12px;
  --btn-padding:       10px 16px;
  --btn-padding-lg:    14px 24px;
  --btn-radius:        var(--radius-sm);
  --btn-font-size:     var(--text-base);
  --btn-min-height:    44px;

  /* ---- Component tokens: Cards ---- */
  --card-bg:           var(--surface);
  --card-border:       var(--line);
  --card-radius:       var(--radius-lg);
  --card-padding:      var(--gap-lg);
  --card-shadow:       var(--shadow-sm);

  /* ============================================================
     Redesign semantic aliases (Phase 0, v2)
     New short names used by packages/design/components.css and by
     future migrations of apps/web, apps/patient, and the marketing
     site. The old tokens above remain load-bearing — these aliases
     add a cleaner vocabulary without breaking any existing consumer.
     ============================================================ */

  /* Type scale — Apple-aligned 5 sizes */
  --t-caption: var(--text-sm);     /* 13px */
  --t-body:    var(--text-base);   /* 14px */
  --t-emph:    var(--text-lg);     /* 18px */
  --t-title:   var(--text-xl);     /* 24px */
  --t-display: var(--text-2xl);    /* 32px */

  /* Weights — primitives use only two */
  --w-regular:  var(--weight-normal);
  --w-semibold: var(--weight-semibold);

  --leading-tight:  var(--leading-tight);
  --leading-body:   var(--leading-normal);
  --tracking-tight: var(--tracking-tight);

  /* Spacing — stepped alias (4/8/12/16/24/40/64) mapped onto existing gap tokens */
  --s-1: 4px;
  --s-2: var(--gap-xs);    /* 8 */
  --s-3: var(--gap-sm);    /* 12 */
  --s-4: var(--gap-md);    /* 16 */
  --s-5: var(--gap);       /* 20 (closest to 24 target) */
  --s-6: var(--gap-xl);    /* 36 (closest to 40) */
  --s-7: 64px;

  /* Radii — 3 meaningful steps */
  --r-sm:   var(--radius-xs);    /* 12 */
  --r-md:   var(--radius-md);    /* 20 */
  --r-lg:   var(--radius-lg);    /* 24 */
  --r-pill: var(--radius-pill);

  /* Motion — single curve, two durations */
  --dur-fast: var(--duration-fast);
  --dur-slow: var(--duration-slow);
  /* --ease is already defined above */

  /* Accent wash — primitives use this for hover/selected states */
  --accent-wash: var(--accent-soft);

  /* Touch target floor (component-agnostic) */
  --tap: 44px;
}

/* ============================================================
   Dark Mode
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #0f172a;
    --surface:        rgba(30, 41, 59, 0.86);
    --surface-strong: #1e293b;
    --surface-muted:  rgba(30, 41, 59, 0.92);
    --line:           rgba(226, 232, 240, 0.12);
    --line-strong:    rgba(226, 232, 240, 0.22);

    --ink:            #e2e8f0;
    --muted:          #a0aec0;

    --accent:         #14b8a6;
    --accent-soft:    rgba(20, 184, 166, 0.12);
    --accent-ink:     #5eead4;
    --accent-hover:   rgba(20, 184, 166, 0.20);

    --interactive:       #38bdf8;
    --interactive-soft:  rgba(56, 189, 248, 0.12);
    --interactive-ink:   #7dd3fc;

    --success:        #4ade80;
    --success-soft:   rgba(74, 222, 128, 0.12);
    --warning:        #fb923c;
    --warning-soft:   rgba(251, 146, 60, 0.12);
    --danger:         #f87171;
    --danger-soft:    rgba(248, 113, 113, 0.10);
    --error:          #f87171;

    --shadow-xs:      0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow:         0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.40);
  }
}

:root[data-theme="dark"] {
  --bg:             #0f172a;
  --surface:        rgba(30, 41, 59, 0.86);
  --surface-strong: #1e293b;
  --surface-muted:  rgba(30, 41, 59, 0.92);
  --line:           rgba(226, 232, 240, 0.12);
  --line-strong:    rgba(226, 232, 240, 0.22);

  --ink:            #e2e8f0;
  --muted:          #a0aec0;

  --accent:         #14b8a6;
  --accent-soft:    rgba(20, 184, 166, 0.12);
  --accent-ink:     #5eead4;
  --accent-hover:   rgba(20, 184, 166, 0.20);

  --interactive:       #38bdf8;
  --interactive-soft:  rgba(56, 189, 248, 0.12);
  --interactive-ink:   #7dd3fc;

  --success:        #4ade80;
  --success-soft:   rgba(74, 222, 128, 0.12);
  --warning:        #fb923c;
  --warning-soft:   rgba(251, 146, 60, 0.12);
  --danger:         #f87171;
  --danger-soft:    rgba(248, 113, 113, 0.10);
  --error:          #f87171;

  --shadow-xs:      0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow:         0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-xl:      0 24px 64px rgba(0, 0, 0, 0.40);
}

/* ============================================================
   Accessibility overrides
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: 0ms ease;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

@media (prefers-contrast: high) {
  :root {
    --line:       rgba(15, 23, 42, 0.24);
    --line-strong: rgba(15, 23, 42, 0.40);
    --muted:      #3d4f63;
  }
}

/* ============================================================
   Shared keyframes
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ============================================================
   Utility classes
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface) 50%, var(--surface-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: var(--z-tooltip);
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}