/* ============================================================================
   Lillio Brand Tokens - canonical, reusable across any project.
   Source of truth: Figma "Lillio Brand Styles"
     file key 3S0ciaCQWPZeXK0LIwDMrd  ·  page "Web Styles" (0:1)
     · Our Colours frame 78:825   · Typeface frame 79:1385   · Logo frame 76:451
   Fonts: Poppins (display/headings) + Inter (UI/body). Loaded below via Google
   Fonts; for a stricter CSP, self-host the woff2 files and drop the @import.
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap");

:root {
  /* ---- Brand hues (base / dark / light) ---- */
  --lillio-teal: #00CCCC;
  --lillio-teal-dark: #009999;
  --lillio-teal-light: #B3F0F0;

  --lillio-green: #66CC99;
  --lillio-green-dark: #009966;
  --lillio-green-light: #D1F0E0;

  --lillio-yellow: #FFCC33;
  --lillio-yellow-dark: #BC8D16;
  --lillio-yellow-light: #FFF0C2;

  --lillio-red: #F76363;
  --lillio-red-dark: #CC3333;
  --lillio-red-light: #FDD0D0;

  /* ---- Neutrals ---- */
  --lillio-charcoal: #313131;   /* primary text */
  --lillio-grey-700: #616161;
  --lillio-grey-500: #919191;
  --lillio-grey-400: #C2C2C2;
  --lillio-grey-300: #E4E4E4;
  --lillio-grey-200: #ECECEC;
  --lillio-grey-100: #F5F5F7;
  --lillio-white: #FFFFFF;
  --lillio-neutral-600: #6D758F; /* muted UI text (from variables) */

  /* ---- Semantic aliases (use these in product UI) ---- */
  --color-text: var(--lillio-charcoal);
  --color-text-muted: var(--lillio-neutral-600);
  --color-primary: var(--lillio-teal-dark);   /* accessible teal for filled buttons */
  --color-primary-hover: #007A7A;             /* derived darker state */
  --color-accent: var(--lillio-teal);         /* highlights, focus, progress */
  --color-success: var(--lillio-green-dark);
  --color-danger: var(--lillio-red-dark);
  --color-surface: var(--lillio-white);
  --color-surface-muted: var(--lillio-grey-100);
  --color-border: var(--lillio-grey-300);

  /* ---- Typography ---- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* type scale (size / line-height) from the Figma Typeface frame */
  --type-h1: 500 56px/66px var(--font-display);
  --type-h4: 500 24px/34px var(--font-display);
  --type-body: 600 18px/24px var(--font-display);
  --type-small: 400 14px/20px var(--font-body);
  --type-small-strong: 600 14px/20px var(--font-body);

  /* ---- Shape ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --shadow-card: 0 8px 30px rgba(0, 153, 153, 0.10);
}