/* ==========================================================================
   Valoritech — Design tokens & base styles
   Every component file reads from these custom properties. Change the
   palette/scale here and it cascades everywhere.
   ========================================================================== */

:root {
  /* --- Brand colors --- */
  --color-red: #e3001b;
  --color-red-dark: #af1e2d;
  --color-red-light: #ff4d5e;

  /* --- Accent (Apple's rainbow-logo green, not the fruit "apple green") --- */
  --color-apple-green: #34c759;
  --color-apple-green-light: #a8e070;

  /* --- Apple's system blue (iOS/macOS link color) --- */
  --color-apple-blue: #007aff;

  /* --- Neutrals --- */
  --color-carbon-black: #1b3139;
  --color-light-gray: #5e616e;
  --color-apple-gray: #a3a5b0;
  --color-background: #f8f8f9;
  --color-white: #ffffff;

  /* --- Dark surface (available for dark sections/panels elsewhere) --- */
  --color-surface-900: #17181b;
  --color-surface-800: #1f2023;
  --color-surface-700: #2c2c2e;
  --color-surface-600: #3a3b3f;
  --gradient-surface: linear-gradient(180deg, var(--color-surface-600) 0%, var(--color-surface-800) 100%);

  /* --- Light surface (default site background — clean SaaS, not pure white) --- */
  --color-surface-50: #eef0f2;
  --color-surface-100: #e4e6ea;
  --gradient-surface-light: linear-gradient(180deg, #f6f7f8 0%, #e6e8ec 100%);

  /* --- Text (default: dark-on-light) --- */
  --color-text-primary: var(--color-carbon-black);
  --color-text-secondary: var(--color-light-gray);
  --color-text-muted: var(--color-apple-gray);

  /* --- Glass tokens (see components/glass.css) — light glass by default --- */
  --glass-bg: rgba(40, 41, 46, 0.33);
  --glass-bg-strong: rgba(32, 33, 38, 0.26);
  --glass-border: rgba(44, 44, 46, 0.1);
  --glass-border-strong: rgba(44, 44, 46, 0.18);
  --glass-blur: 20px;
  --glass-blur-sm: 10px;
  --glass-shadow: 0 8px 32px rgba(44, 44, 46, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* --- Radii --- */
  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --size-lg: 40px;
  --size-xxl: 80px;

  /* --- Typography --- */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xxs: 0.750rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);

  /* --- Layout --- */
  --container-width: 90%;
  --container-max-width: clamp(640px, var(--container-width), 1600px);

  /* Horizontal page gutter — components reference this instead of
     --space-5 directly so the mobile override below is the single place
     that changes it everywhere at once. */
  --gutter-inline: var(--space-5);
}

/* Below this, the clamp's 640px floor is wider than the viewport itself
   (any phone), so it stops tracking --container-width and just pins every
   consumer to a flat 640px. On mobile the site doesn't use a percentage
   container at all — every section goes full width and carves out its own
   gutter via --gutter-inline instead — so this just neutralizes the cap
   (100% == no shrink for the width:100%/max-width consumers, and a valid
   full-width value for the one consumer that uses it as `width`). */
@media (max-width: 768px) {
  :root {
    --container-max-width: 100%;
    --gutter-inline: 20px;
  }
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* clip, not hidden — hidden forces the paired overflow-y to compute to
     auto (per spec, any non-visible overflow-x forces a visible overflow-y
     to auto), turning html/body into scroll containers and breaking every
     position: sticky element on the page (e.g. .value-props__sticky).
     clip is exempt from that pairing rule, so it blocks horizontal
     overflow without the side effect. */
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text-primary);
  background: var(--color-surface-50);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100%;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}