/* ============================================================================
   DiabiPets — design tokens for the marketing site
   ----------------------------------------------------------------------------
   Single source of truth for every colour, radius, shadow, type step and
   spacing value used by the site. Nothing in site.css may hard-code a hex,
   a radius or a shadow — it must resolve to a token declared here.

   Authored from the DiabiPets app design system (spec 002 §8):
     app/.../presentation/ui/theme/Color.kt  — Material 3 baseline purple
                                               palette + feature/status hues
     specs/UI-STYLE-GUIDE.md                 — fixed radius scale, spacing,
                                               flat-card recipe, motion
   Light theme only — the app design system is light-first (spec §4).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Material 3 baseline palette — primary purple #6750A4 and its ramp
   ---------------------------------------------------------------------------- */
:root {
  --m3-primary: #6750A4;
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: #EADDFF;
  --m3-on-primary-container: #21005D;

  --m3-secondary: #625B71;
  --m3-on-secondary: #FFFFFF;
  --m3-secondary-container: #E8DEF8;
  --m3-on-secondary-container: #1D192B;

  --m3-tertiary: #7D5260;
  --m3-on-tertiary: #FFFFFF;
  --m3-tertiary-container: #FFD8E4;
  --m3-on-tertiary-container: #31111D;

  --m3-error: #B3261E;
  --m3-on-error: #FFFFFF;
  --m3-error-container: #F9DEDC;
  --m3-on-error-container: #410E0B;

  --m3-background: #FFFBFE;
  --m3-on-background: #1C1B1F;
  --m3-surface: #FFFBFE;
  --m3-on-surface: #1C1B1F;
  --m3-surface-variant: #E7E0EC;
  --m3-on-surface-variant: #49454F;
  --m3-outline: #79747E;
  --m3-outline-variant: #CAC4D0;

  /* Tonal surface containers — cards and inputs sit on these, not on shadows */
  --m3-surface-container-low: #F7F2FA;
  --m3-surface-container: #F3EDF7;
  --m3-surface-container-high: #ECE6F0;
  --m3-surface-container-highest: #E6E0E9;
}

/* ----------------------------------------------------------------------------
   2. Feature colours — one hue per tracked category (Color.kt)
      Each `-text` variant is the same hue darkened until it clears WCAG AA
      (4.5:1) on white/tinted surfaces; the base hue is for dots, icons and
      chart marks only. Contrast is acceptance-blocking (spec §9).
   ---------------------------------------------------------------------------- */
:root {
  --feature-glucose: #4CAF50;
  --feature-glucose-text: #1B5E20;

  --feature-insulin: #2196F3;
  --feature-insulin-text: #1565C0;

  --feature-meal: #9C27B0;
  --feature-meal-text: #9C27B0;   /* already 6.3:1 on white */

  --feature-weight: #00897B;
  --feature-weight-text: #00695C;

  --feature-symptom: #FF7043;
  --feature-symptom-text: #BF360C;

  --feature-curve: #7E57C2;
  --feature-curve-text: #7E57C2;  /* already 5.2:1 on white */

  --feature-reminder: #FF9500;
  --feature-reminder-text: #8F5300;

  /* Ketones (app spec 033) — brown/amber, kept distinct from reminder orange
     and symptom deep-orange so the category reads as its own thing. */
  --feature-ketone: #8D6E63;
  --feature-ketone-text: #5D4037;
}

/* ----------------------------------------------------------------------------
   3. Glucose status — classification against the pet's own target range.
      User-facing copy is always "Very low" / "Very high", never "critical".
   ---------------------------------------------------------------------------- */
:root {
  --status-normal: #4CAF50;
  --status-normal-text: #1B5E20;

  --status-warning: #FF9800;      /* Low and High */
  --status-warning-text: #9A5700;

  --status-very: #F44336;         /* Very low and Very high */
  --status-very-text: #C62828;

  --status-unknown: #9E9E9E;
  --status-unknown-text: #5F5F5F;
}

/* ----------------------------------------------------------------------------
   4. Shape — the fixed radius scale. Do not introduce new values.
   ---------------------------------------------------------------------------- */
:root {
  --radius-hero: 24px;      /* section cards, device frame, hero surfaces */
  --radius-period: 22px;    /* segmented / period containers */
  --radius-action: 20px;    /* action cards */
  --radius-control: 16px;   /* buttons, inputs, dialogs */
  --radius-chip: 12px;      /* small chips */
  --radius-pill: 999px;     /* pills, status badges, store buttons */
  --radius-circle: 50%;     /* icon containers, avatars */
}

/* ----------------------------------------------------------------------------
   5. Typography — Roboto, Material 3 type scale (1sp ≈ 1px on the web)
   ---------------------------------------------------------------------------- */
:root {
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-icons: 'Material Symbols Rounded';

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --type-display-large: 57px;   --lh-display-large: 64px;   --ls-display-large: -0.25px;
  --type-display-medium: 45px;  --lh-display-medium: 52px;  --ls-display-medium: 0px;
  --type-display-small: 36px;   --lh-display-small: 44px;   --ls-display-small: 0px;

  --type-headline-large: 32px;  --lh-headline-large: 40px;
  --type-headline-medium: 28px; --lh-headline-medium: 36px;
  --type-headline-small: 24px;  --lh-headline-small: 32px;

  --type-title-large: 22px;     --lh-title-large: 28px;
  --type-title-medium: 16px;    --lh-title-medium: 24px;    --ls-title-medium: 0.15px;
  --type-title-small: 14px;     --lh-title-small: 20px;     --ls-title-small: 0.1px;

  --type-body-large: 16px;      --lh-body-large: 26px;      --ls-body-large: 0.15px;
  --type-body-medium: 14px;     --lh-body-medium: 22px;     --ls-body-medium: 0.25px;
  --type-body-small: 12px;      --lh-body-small: 16px;      --ls-body-small: 0.4px;

  --type-label-large: 14px;     --lh-label-large: 20px;     --ls-label-large: 0.1px;
  --type-label-medium: 12px;    --lh-label-medium: 16px;    --ls-label-medium: 0.5px;
  --type-label-small: 11px;     --lh-label-small: 16px;     --ls-label-small: 0.5px;

  /* Marketing display step — the site's hero headline. Sits above the M3 scale
     the way the app's 40px hero value does, and clamps down to phone widths. */
  --type-hero: clamp(32px, 5.2vw + 12px, 57px);
  --lh-hero: 1.12;
  --ls-hero: -0.02em;

  /* Section headings clamp between headline-medium and display-small */
  --type-section: clamp(26px, 2.2vw + 16px, 36px);
  --lh-section: 1.2;
}

/* ----------------------------------------------------------------------------
   6. Spacing — 4px base unit, plus the site's section spacing tiers (spec §8)
   ---------------------------------------------------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --space-card: var(--space-6);       /* card internal padding */
  --space-gutter: var(--space-4);     /* page horizontal padding, phones */
  --space-gutter-lg: var(--space-6);  /* page horizontal padding, ≥768px */

  /* Section rhythm tiers: 16 / 24 / 32 / 48 / 80 */
  --space-section-y: clamp(var(--space-12), 6vw, var(--space-20));
  --space-section-gap: var(--space-8);

  --size-touch-min: 44px;             /* minimum touch target */
  --size-icon: 24px;
  --size-icon-container: 48px;

  --container-max: 1140px;
  --container-wide: 1240px;
  --measure: 62ch;                    /* readable line length for body copy */
  --nav-height: 64px;
}

/* ----------------------------------------------------------------------------
   7. Elevation — the app is flat: tonal surface + hairline border. The site
      adds one very soft card shadow (spec §8 "soft Material elevation"),
      never blur-heavy, never neumorphic.
   ---------------------------------------------------------------------------- */
:root {
  --border-hairline: 1px solid color-mix(in srgb, var(--m3-outline) 24%, transparent);
  --border-strong: 1px solid var(--m3-outline-variant);

  --shadow-card: 0 1px 2px rgba(28, 27, 31, 0.04), 0 2px 8px rgba(28, 27, 31, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(28, 27, 31, 0.05), 0 8px 20px rgba(28, 27, 31, 0.08);
  --shadow-nav: 0 1px 3px rgba(28, 27, 31, 0.07);
  --shadow-device: 0 18px 40px rgba(33, 0, 93, 0.14);
  --shadow-sticky: 0 -2px 12px rgba(28, 27, 31, 0.08);
}

/* ----------------------------------------------------------------------------
   8. Motion — restrained and quick, matching the app (tween 200ms house easing)
   ---------------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-reveal: 400ms;
}

/* ----------------------------------------------------------------------------
   9. Layering
   ---------------------------------------------------------------------------- */
:root {
  --z-base: 0;
  --z-raised: 10;
  --z-sticky-cta: 80;
  --z-scrim: 90;
  --z-nav: 100;
  --z-menu: 110;
  --z-skip: 1000;
}

/* ----------------------------------------------------------------------------
   10. Semantic site aliases — components reference these, not the raw ramp
   ---------------------------------------------------------------------------- */
:root {
  --accent: var(--m3-primary);
  --on-accent: var(--m3-on-primary);
  --accent-container: var(--m3-primary-container);
  --on-accent-container: var(--m3-on-primary-container);

  --text-primary: var(--m3-on-surface);
  --text-secondary: var(--m3-on-surface-variant);
  --text-muted: var(--m3-outline);
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: color-mix(in srgb, #FFFFFF 72%, transparent);

  --surface-page: var(--m3-background);
  --surface-alt: var(--m3-surface-container-low);
  --surface-card: #FFFFFF;
  --surface-card-tonal: var(--m3-surface-container-low);
  --surface-nav: color-mix(in srgb, var(--m3-background) 85%, transparent);
  --surface-footer: var(--m3-on-surface);

  --border-subtle: var(--border-hairline);
  --divider: color-mix(in srgb, var(--m3-outline-variant) 70%, transparent);

  /* Pressed / hover state for the filled button — the M3 state-layer idea
     expressed as a darker mix of the same primary. */
  --accent-pressed: color-mix(in srgb, var(--m3-primary) 88%, #000000);
  --divider-on-dark: color-mix(in srgb, #FFFFFF 14%, transparent);

  --focus-ring-color: var(--m3-primary);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Tinted-card recipe from the app: fill = hue @15%, border = hue @40% */
  --tint-fill: 15%;
  --tint-border: 40%;
}