/* LivOn — Colour system
   Source of truth: Figma "Branding › Brand Colours" + "App Colours",
   extended 2026-08-31 from the iOS app screenshots (IMG_5615/16/17/19/21).
   Every value below is sampled from those references — none are invented.
   Naming is role-based: <role>-<variant>. */

/* [data-theme="light"] is declared alongside :root so a subtree can be pinned to
   the light palette even when <html data-theme="dark"> — that is how the Light and
   Dark specimen cards show a true side-by-side whatever the page theme is. */
:root, [data-theme="light"] {
  /* ── Brand palette ───────────────────────────────────────────── */
  --brand-purple: #625ECF;        /* Primary brand. Calming, trustworthy purple. */
  --brand-purple-light: #A7A5EE;  /* Secondary / complementary purple. */
  --brand-orange: #FFA534;        /* Accent 1 — warm, optimistic highlighter. */
  --brand-mint: #3AD88F;          /* Accent 2 — fresh, natural green. */
  --brand-sky: #1FB6FF;           /* Accent 3 — cheerful, friendly blue. */

  /* ── Core / action colours (product UI) ──────────────────────── */
  --color-primary: #5049C2;       /* Main action colour. Buttons, nav labels, active tab. */
  --color-primary-press: #423CA6; /* Pressed / active state of a primary control. */
  --color-primary-soft: #EFEEFB;  /* Tinted purple surface (chips, hovers). */
  --color-secondary: #26BE84;     /* Secondary brand green. Decorative fills ONLY —
                                     never behind white text (see --color-selected). */
  --color-success: #25B679;       /* Positive state / confirmation. */
  --color-link: #147AD6;          /* Informational accent — icons, bars, fills (4.39:1,
                                     clears the 3:1 UI minimum). NOT for text: use
                                     --text-link. Absorbed the former --color-info. */

  /* ── Identity ────────────────────────────────────────────────── */
  --color-identity: #035EE2;      /* NEW. User-account identity fill: the initial
                                     avatar on Home, Chat and Profile Details.
                                     Deliberately NOT brand purple — it marks
                                     "you", not "the product". Always pairs with
                                     --text-on-brand. */

  /* ── Selection ───────────────────────────────────────────────── */
  --color-selected: #12885B;      /* NEW. Fill of a selected multi-choice chip
                                     (Retirement Goals). Darkened from the sampled
                                     #26BE84 so white chip labels reach AA 4.47:1. */

  /* ── Provenance ──────────────────────────────────────────────── */
  --color-provenance: #4C7A15;    /* NEW. "Because you love gardening" — the
                                     why-you're-seeing-this label on recommendation
                                     cards. Only ever text + its leaf glyph. */

  /* ── Semantic / status ───────────────────────────────────────── */
  --color-error: #E1194E;         /* Also the destructive-action fill (Delete Account). */
  --color-error-bg: #FDE8EE;
  --color-warning: #F5A623;         /* Icon / bar fill. Not a text colour on a tint. */
  --color-warning-bg: #FFF6E0;
  --color-success-bg: #E4F7EF;      /* NEW. Tint behind a success badge. */
  --color-link-bg: #E6F1FB;         /* NEW. Tint behind an info badge. */
  /* Text-safe variants for use ON the tints above. The base hues are too light
     to carry 12px badge text: --color-success on --color-success-bg is only
     2.34:1, --color-link on --color-link-bg 3.83:1. */
  --color-success-text: #0F7A50;    /* NEW. 4.81:1 on --color-success-bg. */
  --color-link-text: #0F62B0;       /* NEW. 5.40:1 on --color-link-bg. */
  --color-warning-text: #8A5600;    /* NEW. 5.72:1 on --color-warning-bg. */

  /* ── Disabled states ─────────────────────────────────────────── */
  --color-primary-disabled: #A7A5EE;  /* e.g. inactive "Save" in a nav bar. */
  --color-secondary-disabled: #8DD9BC;
  --color-link-disabled: #84B7E5;
  --color-text-disabled: #A6A6A6;

  /* ── Text ────────────────────────────────────────────────────── */
  --text-primary: #1A1A1A;        /* Main text — high contrast on any light surface. */
  --text-secondary: #383838;      /* Body copy / supporting text. */
  --text-tertiary: #6B6B6B;       /* Captions, metadata. */
  --text-placeholder: #5F5F5F;    /* NEW. Input placeholder ("Type a message").
                                     Darkened from the sampled #A6A6A6, which failed
                                     AA on --surface-field (2.02:1 → 5.31:1). */
  --text-disabled: #A6A6A6;       /* Genuinely inert text only (AA-exempt). */
  --text-link: #0F62B0;          /* Link TEXT. Darkened from #147AD6, which reads
                                     only 4.39:1 on white — fine as a 3:1 icon/fill
                                     colour, short of AA as body text. Now 6.19:1.
                                     Same value as --color-link-text. */
  --text-on-brand: #FFFFFF;       /* Text on purple / identity / selected fills. */

  /* ── Surfaces ────────────────────────────────────────────────── */
  --surface-primary: #FFFFFF;     /* Default page background. */
  --surface-secondary: #F4F4F4;   /* Grouped list rows, settings cards.
                                     Absorbed the former --brand-grey (identical hex). */
  --surface-lavender: #F2F2FF;    /* Tinted brand surface (Liv greeting card, daily spark).
                                     Absorbed the former --brand-lavender (identical hex). */
  --surface-chrome: #F5F3F9;      /* NEW. Status bar + nav bar band. The one surface that
                                     sits ABOVE content, not inside it. Merged with the
                                     near-identical #F3F1F8 seen on the Chat header. */
  --surface-field: #EAEAEA;       /* NEW. Fill of a text input inside a composer bar. */
  --surface-overlay: rgba(26, 26, 26, 0.4); /* Dimming overlay behind sheets/modals. */

  /* ── Lines & borders ─────────────────────────────────────────── */
  --stroke: #E2E2E2;              /* Decorative dividers and card outlines (AA-exempt). */
  --icon-inactive: #6B6B6B;       /* NEW. Unselected tab-bar / toolbar icon. Was a
                                     hardcoded #B4B4B4 (2.07:1 — failed the 3:1 UI
                                     minimum); now 5.33:1. */
  --stroke-strong: #1A1A1A;       /* High-contrast outline — unselected chips,
                                     secondary buttons. Carries meaning, so it must
                                     stay at/above 3:1 against its surface. */

  /* ── SSO / federated sign-in ─────────────────────────────────── */
  /* Sampled from the login screen. These are the PROVIDERS' mandated brand
     colours, not LivOn's — they are the one set of tokens that must NOT be
     restyled to fit the palette, and they hold the same values in dark mode
     (Google and Apple both require it). Keep them out of general component use. */
  --sso-google-surface: #FFFFFF;  /* Google button fill. */
  --sso-google-label: #1A1A1A;    /* Google button label. 17.40:1. */
  --sso-apple-surface: #1A1A1A;   /* Apple button fill. */
  --sso-apple-label: #FFFFFF;     /* Apple button label. 17.40:1. */
  --sso-stroke: rgba(26,26,26,.10); /* Hairline for the white button on a light backdrop. */

  /* ── Brand gradients ─────────────────────────────────────────── */
  --gradient-brand: linear-gradient(157deg, #7E7AE6 0%, #5A53C8 100%); /* @kind color */
  --gradient-avatar: linear-gradient(180deg, #8C88EA 0%, #5049C2 100%); /* @kind color */
}

/* Placeholder text repoint — the sampled #A6A6A6 failed AA on --surface-field
   (2.02:1). This one rule fixes every input in the system at once. */
input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1; }