/* Corda × Family — design tokens
   Corda's calm green/cream PALETTE on the Family STRUCTURE:
   warm cream base, sage-green brand accent, soft sage signals —
   carried on Family's layout language (Inter, tight tracking,
   large bimodal radii, soft layered shadows, expo-out motion).
   Same variable NAMES as tokens.css so every component inherits. */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');

:root {
  /* Warm neutrals — Corda cream/surface system */
  --bg:        #F4F1EA;        /* cream */
  --bg-soft:   #EFEBE2;
  --surface:   #FCFAF6;        /* surface */
  --surface-2: #F8F5EE;
  --hairline:  #E5E0D5;
  --hairline-soft: #EDE8DC;

  /* Ink — Corda warm charcoal */
  --ink:       #2A2620;
  --ink-2:     #5A554E;
  --ink-3:     #6F6A61;        /* muted text — darkened from #8A857C to meet WCAG AA 4.5:1 on cream */
  --ink-4:     #B0ABA0;

  /* Sage — calming primary brand accent (Corda triskele palette).
     Drives every primary action, link, active state & focus. */
  --sage:      #6E8B7B;
  --sage-deep: #44594F;
  --sage-ink:  #2F3F37;
  --sage-soft: #DDE7DE;
  --sage-tint: #EDF2EC;

  /* Signal colors — used sparingly, soft Corda tones */
  --clay:      oklch(0.60 0.115 40);    /* alert / urgent */
  --clay-soft: oklch(0.94 0.040 50);
  --amber:     oklch(0.74 0.115 75);    /* warning / Papa accent */
  --amber-soft:oklch(0.95 0.038 85);
  --plum:      oklch(0.52 0.085 320);   /* info / AI */
  --plum-soft: oklch(0.94 0.025 320);

  /* Patient identity colors (consumed by CAL_PATIENTS) */
  --pat-nana-grad: linear-gradient(135deg, oklch(0.82 0.06 155), oklch(0.72 0.09 155));
  --pat-nana-pip:  oklch(0.62 0.07 155);
  --pat-papa-grad: linear-gradient(135deg, oklch(0.87 0.06 75), oklch(0.78 0.10 75));
  --pat-papa-pip:  oklch(0.66 0.10 75);
  --pat-papa-deep: oklch(0.42 0.10 65);
  --pat-papa-ink:  oklch(0.36 0.08 65);

  /* Type — Inter is the documented Family web fallback for LFESans/Family */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-serif:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* no serif in Family — display is sans */

  /* Radii — bimodal: tiny functional + large pill */
  --r-xs: 6px;
  --r-sm: 12px;   /* cards / list rows */
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;   /* large cards */
  --r-tray: 40px; /* trays / sheets */

  /* Shadows — soft, low-contrast, layered (Family form, warm Corda tone) */
  --sh-1: 0 1px 6px rgba(40,30,20,.04), 0 0 24px rgba(40,30,20,.05);
  --sh-2: 0 1px 6px rgba(40,30,20,.05), 0 6px 20px rgba(40,30,20,.06);
  --sh-3: 0 3px 16px rgba(40,30,20,.10), 0 16px 44px rgba(40,30,20,.10);
  --ring: inset 0 0 0 1px var(--hairline);

  /* Motion — expo-out, fast-start / long-settle */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

.w-app {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'cv05';
  letter-spacing: -0.012em;       /* Family signature: tight negative tracking */
}
.w-app * { box-sizing: border-box; }

/* Family has no serif — neutralize every inline italic display treatment
   and give the former serif headings a Family medium-weight display voice.
   (A stylesheet !important rule overrides inline style declarations.) */
.w-app [style*="italic"] { font-style: normal !important; font-weight: 500 !important; letter-spacing: -0.022em !important; }

.serif { font-family: var(--font-sans); font-style: normal; font-weight: 500; letter-spacing: -0.022em; }
.mono  { font-variant-numeric: tabular-nums; }

/* Onboarding motion */
@keyframes cordaSpin   { to { transform: rotate(360deg); } }
@keyframes cordaPulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.78; transform: scale(0.985); } }
@keyframes cordaDots   { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes cordaRise    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cordaBar     { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes cordaSheen   { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
@keyframes cordaRing    { 0% { opacity: 0.6; transform: scale(0.9); } 70% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cordaDot     { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
@keyframes cordaCaret   { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }