/*
 * KalmeFit design tokens. The ONLY file in docs/design allowed to contain a
 * colour value. Screens and components reference var(--kf-*) and nothing else
 * (owner, 2026-09-22: "colors need to be from our tokens"). Gate:
 *   grep -rnE "#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(" docs/design/screens docs/design/avatar
 * must print nothing.
 *
 * Provenance. KalmeFit ports constants/theme.ts from the reference tree
 * (PLAN v2 step 5) with the persona axis renamed to accent (D4, D7). The values
 * below are that file's values, keyed by the D7 KalmeTheme names:
 *   theme.ts base.*            -> neutrals
 *   theme.ts personas.p1.accent -> the "kalme" accent (Kalme green, D4)
 *   theme.ts Colors.dark / darkPhone* -> dark mode (D7: dark supported, light first)
 * A value marked DERIVED is computed here from those, never invented.
 */

:root {
  color-scheme: light dark;

  /* Neutrals, light (theme.ts base) */
  --kf-bg: #FFFFFF;                 /* base.background, locked white 2026-04-24 */
  --kf-surface-2: #F4F6F8;          /* original ColorPallet background; app/_layout.tsx:57 */
  --kf-surface-3: #E9EEF3;          /* base.elevatedSurface */
  --kf-ink: #1C1F23;                /* base.deep / textPrimary, "no pure black" */
  --kf-ink-2: #6B7280;              /* base.textSecondary, 4.8:1 on white */
  --kf-ink-3: #9AA3AF;              /* base.textMuted: placeholder and disabled only, never body text */
  --kf-hairline: #E5E7EB;           /* base.divider */
  --kf-icon: #6B7280;               /* base.iconDefault */

  /* KalmeTheme accent "kalme" (D4, D7; theme.ts personas.p1.accent) */
  --kf-accent: #1F7A53;             /* accent.base: primary actions and meaningful states only */
  --kf-accent-strong: #166344;      /* accent.dark: pressed */
  --kf-accent-bright: #2FA36B;      /* accent.light */
  --kf-accent-ink: #0F3D2E;         /* accent.ink */
  --kf-accent-contrast: #FFFFFF;    /* text on accent */
  --kf-accent-soft: color-mix(in srgb, var(--kf-accent) 7%, var(--kf-bg));   /* DERIVED: row hover and selected tint */
  --kf-agent-glow: #2FA36B;         /* D7 agentGlow = accent.light: Kalme's attention (listening, coaching) */
  --kf-chart-positive: #2FA36B;     /* D7 chartPositive = base.success */

  /* Brand greens (D85: the Companion System set, brand-tokens.json; owner chose it for marketing surfaces).
     Used sparingly: primary actions, the pebble, small marks. Theme-independent. */
  --kf-brand-green: #00B88A;        /* brand.green: primary CTA on marketing surfaces, pebble body.
                                       Text on it is near-black #0F1318 (7.30:1); white fails at 2.55:1 */
  --kf-brand-energy: #50E879;       /* brand.energy: pebble highlight, the smallest accents only */
  --kf-brand-teal: #073A42;         /* brand.deep_teal: pebble shadow side */
  --kf-brand-mint: #DDF8EE;         /* brand.mint: pebble eyes only (never text on brand green) */
  --kf-brand-glint: #FFFFFF;        /* D103: theme-independent white for the band Kalme's eye glints and grain mask only */
  --kf-device-frame: #161618;       /* D86/D88 phone mockups: near-black graphite frame (owner: "make the iphone frame darker") */
  --kf-device-island: #000000;      /* D86 phone mockups: the Dynamic Island */
  --kf-device-edge: #2C2C2E;        /* D85/D88 phone mockups: frame edge and side buttons */
  --kf-device-shadow: #000000;      /* D88 phone mockups: the soft drop shadow that blends the phone into the page */
  --kf-kalme-paper: #FFFFFF;        /* D113 app loading: light background and dark-theme character; theme-independent */
  --kf-kalme-ink: #000000;          /* D113 app loading: dark background and light-theme character; theme-independent */

  /* Status (theme.ts base) */
  --kf-success: #2FA36B;            /* base.success */
  --kf-warning: #F2A93B;            /* base.warning: marks and icons only, text stays ink (2.0:1 on white) */

  /* Overlay (theme.ts base.overlay) */
  --kf-glass: rgba(255, 255, 255, 0.72);   /* base.overlay.glass: iOS system chrome only (tab bar), never content */
  --kf-scrim: rgba(0, 0, 0, 0.35);         /* base.overlay.dark: behind sheets */
  --kf-shadow: rgba(28, 31, 35, 0.08);     /* DERIVED: ink at 8 percent, floating chrome only */

  /* Kalme avatar (D4 face-only, D9, D40, D50 shapes). Light: near-black body, light eyes. */
  --kf-avatar-body: var(--kf-ink);
  --kf-avatar-body-lift: color-mix(in srgb, var(--kf-ink) 78%, var(--kf-bg));    /* DERIVED: upper-left light on the body */
  --kf-avatar-eye: var(--kf-bg);
  --kf-avatar-attention: var(--kf-agent-glow);

  /* Type: iOS Dynamic Type "Large" defaults (Apple HIG), system face (theme.ts Fonts.sans) */
  --kf-font: "Geist", -apple-system, "SF Pro Text", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --kf-font-display: "Geist", -apple-system, "SF Pro Display", system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --kf-font-rounded: ui-rounded, "SF Pro Rounded", var(--kf-font);
  --kf-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* D87 */
  --kf-font-mono-nums: tabular-nums;
  --kf-text-large-title: 700 34px/41px var(--kf-font-display);
  --kf-text-title-1: 700 28px/34px var(--kf-font-display);
  --kf-text-title-2: 700 22px/28px var(--kf-font-display);
  --kf-text-title-3: 600 20px/25px var(--kf-font-display);
  --kf-text-headline: 600 17px/22px var(--kf-font);
  --kf-text-body: 400 17px/22px var(--kf-font);
  --kf-text-callout: 400 16px/21px var(--kf-font);
  --kf-text-subhead: 400 15px/20px var(--kf-font);
  --kf-text-footnote: 400 13px/18px var(--kf-font);
  --kf-text-caption: 400 12px/16px var(--kf-font);
  --kf-text-micro: 600 11px/13px var(--kf-font);      /* uppercase micro-labels, tracking 0.06em */

  /* Space (theme.ts spacing) */
  --kf-s-1: 4px;  --kf-s-2: 8px;  --kf-s-3: 12px; --kf-s-4: 16px;
  --kf-s-5: 24px; --kf-s-6: 32px; --kf-s-7: 48px; --kf-s-8: 64px;
  --kf-gutter: 16px;                /* iOS standard margin, owner rule: 16px side gutter */

  /* Radii (theme.ts radii) */
  --kf-r-xs: 6px; --kf-r-sm: 10px; --kf-r-md: 14px; --kf-r-lg: 20px; --kf-r-xl: 28px; --kf-r-pill: 999px;

  /* Touch (theme.ts hitTarget; HIG) */
  --kf-hit: 44px;

  /* Motion */
  --kf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kf-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --kf-dur-fast: 160ms; --kf-dur: 240ms; --kf-dur-slow: 420ms;

  /* Device frame for mockups: iPhone 393 x 852 pt, safe areas */
  --kf-device-w: 393px; --kf-device-h: 852px;
  --kf-safe-top: 59px; --kf-safe-bottom: 34px;
}

/* Dark mode (theme.ts darkPhoneBase, darkPhoneElev, Colors.dark) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kf-bg: #0F1318;               /* base.darkPhoneBase */
    --kf-surface-2: #171B21;        /* base.darkPhoneElev */
    --kf-surface-3: color-mix(in srgb, #171B21 80%, #ECEDEE);   /* DERIVED */
    --kf-ink: #ECEDEE;              /* Colors.dark.text */
    --kf-ink-2: #9BA1A6;            /* Colors.dark.icon */
    --kf-ink-3: color-mix(in srgb, #9BA1A6 60%, #0F1318);       /* DERIVED */
    --kf-hairline: color-mix(in srgb, #ECEDEE 12%, #0F1318);   /* DERIVED */
    --kf-icon: #9BA1A6;
    --kf-accent: #2FA36B;           /* accent.light reads on dark; base fails 4.5:1 as text */
    --kf-accent-strong: #1F7A53;
    --kf-accent-contrast: #0F1318;
    --kf-glass: rgba(23, 27, 33, 0.72);
    --kf-shadow: rgba(0, 0, 0, 0.4);
    --kf-avatar-body-lift: color-mix(in srgb, #ECEDEE 80%, #0F1318);
  }
}
:root[data-theme="dark"] {
  --kf-bg: #0F1318;
  --kf-surface-2: #171B21;
  --kf-surface-3: color-mix(in srgb, #171B21 80%, #ECEDEE);
  --kf-ink: #ECEDEE;
  --kf-ink-2: #9BA1A6;
  --kf-ink-3: color-mix(in srgb, #9BA1A6 60%, #0F1318);
  --kf-hairline: color-mix(in srgb, #ECEDEE 12%, #0F1318);
  --kf-icon: #9BA1A6;
  --kf-accent: #2FA36B;
  --kf-accent-strong: #1F7A53;
  --kf-accent-contrast: #0F1318;
  --kf-glass: rgba(23, 27, 33, 0.72);
  --kf-shadow: rgba(0, 0, 0, 0.4);
  --kf-avatar-body-lift: color-mix(in srgb, #ECEDEE 80%, #0F1318);
}

/* Marketing site surface (D85, owner 2026-09-22: "use darker colors for dark theme", x.ai reference).
   Neutral near-black, no blue tint. Scoped to kalmefit.com via <html data-surface="site">; the app's dark theme
   (theme.ts, above) is unchanged. Contrast on #0A0A0A / #161616: ink 17.68 / 16.16, ink-2 7.66 / 7.00,
   ink-3 5.0 / 4.58, brand green 7.75 / 7.09; #0A0A0A text on brand green 7.75. */
:root[data-surface="site"] {
  /* D98: night and day sets; --kf-day (0 night .. 1 day) is set by the day and night dial and blends every site
     colour. Day contrast (computed): ink 19.8 / 17.83, ink-2 7.38 / 6.65, ink-3 5.27 / 4.75 on #FFFFFF / #F2F3F5. */
  --kf-night-bg: #0A0A0A;      --kf-day-bg: #FFFFFF;
  --kf-night-surface-2: #161616; --kf-day-surface-2: #F2F3F5;
  --kf-night-surface-3: #222222; --kf-day-surface-3: #E6E8EB;
  --kf-night-ink: #F2F2F2;     --kf-day-ink: #0A0A0A;
  --kf-night-ink-2: #A1A1A1;   --kf-day-ink-2: #52565C;
  --kf-night-ink-3: #808080;   --kf-day-ink-3: #686C73;
  --kf-night-hairline: #262626; --kf-day-hairline: #E3E5E8;
  --kf-day-mix: calc(var(--kf-day, 0) * 100%);
  --kf-bg: color-mix(in srgb, var(--kf-day-bg) var(--kf-day-mix), var(--kf-night-bg));
  --kf-surface-2: color-mix(in srgb, var(--kf-day-surface-2) var(--kf-day-mix), var(--kf-night-surface-2));
  --kf-surface-3: color-mix(in srgb, var(--kf-day-surface-3) var(--kf-day-mix), var(--kf-night-surface-3));
  --kf-ink: color-mix(in srgb, var(--kf-day-ink) var(--kf-day-mix), var(--kf-night-ink));
  --kf-ink-2: color-mix(in srgb, var(--kf-day-ink-2) var(--kf-day-mix), var(--kf-night-ink-2));
  --kf-ink-3: color-mix(in srgb, var(--kf-day-ink-3) var(--kf-day-mix), var(--kf-night-ink-3));
  --kf-hairline: color-mix(in srgb, var(--kf-day-hairline) var(--kf-day-mix), var(--kf-night-hairline));
  --kf-icon: var(--kf-ink-2);
}

/* Device screen inside marketing mockups (D86 layout, D88 colour; owner 2026-09-22: "in phone experiance needs to be
   white", "these should mimic our real ios app"). The Grok Bot layout on the app's LIGHT screen (D7 light first).
   Computed contrast: ink on the Kalme bubble 17.01; white on the user bubble 18.88; ink-2 6.05 on white and 5.45 on the
   bubble; ink-3 5.36 on white and 4.83 on the bubble (#767B84 failed at 4.25 / 3.83); the action 18.88. */
[data-surface="device"] {
  --kf-bg: #FFFFFF;
  --kf-surface-2: #F2F3F5;
  --kf-surface-3: #E6E8EB;
  --kf-ink: #111111;
  --kf-ink-2: #5F6368;
  --kf-ink-3: #666B73;
  --kf-hairline: #E3E5E8;
  --kf-bubble-user: #111111;
  --kf-bubble-user-ink: #FFFFFF;
  --kf-action: #111111;
  --kf-action-ink: #FFFFFF;
}