/* ============================================================================
 * SendAPhoto Showcase Website — design tokens
 * ============================================================================
 * SOURCING: Stitch project "SendAPhoto Showcase Website"
 * (projects/7360699741373687175), 4 screens — Home (Desktop 2560x8758),
 * Home (Mobile 780x11070), FAQ (Desktop 2560x3506), FAQ (Mobile 780x4168).
 *
 * Every value below comes from one of two sources, in this priority order
 * (mirrors the same methodology already used for the app's own
 * design_tokens.dart — source 2 wins on conflict, since it's what the
 * screens actually render, not just what the theme doc claims):
 *   1. The project's own theme JSON (mcp__stitch__get_project →
 *      designTheme.namedColors / .typography / .spacing / .roundness).
 *   2. The literal Tailwind config + raw <style> blocks embedded in each
 *      screen's generated HTML (fetched via each screen's
 *      htmlCode.downloadUrl) — checked because designTheme.designMd's prose
 *      section turned out to describe a DIFFERENT radius scale (sm/DEFAULT/
 *      md/lg/xl/full = 4/8/12/16/24px/pill) than what the generated
 *      tailwind.config actually declares (DEFAULT/lg/xl/full = 4/8/12px/pill,
 *      no md step) — the generated code is authoritative for what's below,
 *      not the prose.
 *
 * No value here was invented, guessed, or "rounded to something similar" —
 * where a value exists in the generated code but I couldn't pin down which
 * exact element uses it, it's called out in a comment rather than assigned
 * a guessed purpose.
 * ============================================================================ */

:root {
  /* ---------- Colors (identical in namedColors AND generated Tailwind
     config — no conflict here) ---------- */
  --color-background: #f9f9ff;
  --color-surface: #f9f9ff;
  --color-surface-bright: #f9f9ff;
  --color-surface-dim: #d3daef;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f1f3ff;
  --color-surface-container: #e9edff;
  --color-surface-container-high: #e1e8fd;
  --color-surface-container-highest: #dce2f7;
  --color-surface-variant: #dce2f7;
  --color-surface-tint: #494bd6;

  --color-on-surface: #141b2b;
  --color-on-surface-variant: #464554;
  --color-outline: #767586;
  --color-outline-variant: #c7c4d7;

  --color-inverse-surface: #293040;
  --color-inverse-on-surface: #edf0ff;
  --color-inverse-primary: #c0c1ff;

  --color-primary: #4648d4;
  --color-on-primary: #ffffff;
  --color-primary-container: #6063ee;
  --color-on-primary-container: #fffbff;
  --color-primary-fixed: #e1e0ff;
  --color-primary-fixed-dim: #c0c1ff;
  --color-on-primary-fixed: #07006c;
  --color-on-primary-fixed-variant: #2f2ebe;

  --color-secondary: #5c5f60;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #e1e3e4;
  --color-on-secondary-container: #626566;

  --color-tertiary: #904900;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #b55d00;
  --color-on-tertiary-container: #fffbff;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  /* ---------- Glassmorphism (differentiator/"bento" cards) ----------
     NOT in the named-color palette — literal raw CSS in the generated
     <style> block, and it DIFFERS between the desktop and mobile screens
     (mobile's border is more transparent — likely an unintentional
     inconsistency between the two Stitch renders rather than a deliberate
     responsive change; flagged in the comparison report, desktop version
     used here as primary since it's more visible against the light bg). */
  --glass-card-bg: rgba(255, 255, 255, 0.7);
  --glass-card-blur: 12px;
  --glass-card-border-desktop: rgba(229, 231, 235, 0.5);
  --glass-card-border-mobile: rgba(255, 255, 255, 0.3);

  /* Hero background tint (radial-gradient, desktop screen's <style> block).
     rgba(70,72,212,*) is #4648d4 (primary) — confirmed same hue. */
  --hero-gradient: radial-gradient(circle at 50% 50%, rgba(70, 72, 212, 0.05) 0%, rgba(249, 249, 255, 1) 100%);

  /* "soft-shadow" utility — only defined in the MOBILE screen's <style>
     block (not present in the desktop screen's <style> at all), but it
     matches designMd's prose shadow spec exactly, so it's a real,
     intentional token even though only one screen's raw CSS declares it. */
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.04);

  /* ---------- Typography ---------- */
  --font-family: 'Inter', sans-serif;
  /* Google Fonts weights actually loaded across the 2 screens' <link> tags:
     400, 600, 700, 800 (home), 400, 600, 700 (FAQ), plus a variable-font
     100..900 import on both — usable weights confirmed IN USE by generated
     markup: 400 (body), 600 (headline-md scale), 700 (buttons, H1, card
     titles), 800 (price numbers, text-4xl font-extrabold). */

  --text-display-lg-size: 64px;
  --text-display-lg-weight: 700;
  --text-display-lg-line-height: 1.1;
  --text-display-lg-letter-spacing: -0.02em;

  --text-display-lg-mobile-size: 40px;
  --text-display-lg-mobile-weight: 700;
  --text-display-lg-mobile-line-height: 1.2;
  --text-display-lg-mobile-letter-spacing: -0.01em;

  --text-headline-md-size: 36px;
  --text-headline-md-weight: 600;
  --text-headline-md-line-height: 1.3;
  --text-headline-md-letter-spacing: -0.01em;

  --text-headline-md-mobile-size: 28px;
  --text-headline-md-mobile-weight: 600;
  --text-headline-md-mobile-line-height: 1.3;

  --text-body-lg-size: 18px;
  --text-body-lg-weight: 400;
  --text-body-lg-line-height: 1.6;

  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-line-height: 1.5;

  --text-label-sm-size: 14px;
  --text-label-sm-weight: 600;
  --text-label-sm-line-height: 1;
  --text-label-sm-letter-spacing: 0.05em;

  /* ---------- Spacing (custom tokens from the project's own scale) ---------- */
  --spacing-container-max: 1280px;
  --spacing-gutter: 32px;
  --spacing-margin-desktop: 64px;
  --spacing-margin-mobile: 20px;
  --spacing-stack-unit: 8px;

  /* Real measured usage from generated markup — these are STOCK Tailwind
     spacing-scale values (not custom tokens), but recorded here because
     they're the actual, consistently-repeated section/card rhythm observed
     across every section of both Home screens: */
  --spacing-section-y: 128px;   /* py-32, used on come-funziona/differentiators/pricing sections */
  --spacing-section-y-compact: 96px; /* py-24, used on hero and final-CTA sections, and the footer */
  --spacing-card-padding-lg: 48px;  /* p-12, the large 2x2 bento card */
  --spacing-card-padding-md: 40px;  /* p-10, price cards, standalone glass cards */
  --spacing-card-padding-sm: 32px;  /* p-8, most feature cards, accordion items, nav CTA */
  --spacing-header-height: 80px;    /* h-20, both desktop and mobile nav bar */

  /* ---------- Corner radii ----------
     NOTE: the generated tailwind.config's custom "borderRadius" extend block
     (DEFAULT/lg/xl/full) resolves to numerically IDENTICAL values to stock
     Tailwind's own defaults for those same keys — so radii below marked
     "stock" are still real, deliberate, measured values in the rendered
     output, just not a deviation from Tailwind's built-in scale. */
  --radius-default: 4px;   /* 0.25rem — custom config key, = Tailwind stock */
  --radius-lg: 8px;        /* 0.5rem  — custom config key, = Tailwind stock — small support-card rows on FAQ */
  --radius-xl: 12px;       /* 0.75rem — custom config key, = Tailwind stock — ALL buttons, accordion items */
  --radius-2xl: 16px;      /* 1rem    — Tailwind stock (not in custom config) — step-icon chip bg, final-CTA button */
  --radius-3xl: 24px;      /* 1.5rem  — Tailwind stock (not in custom config) — feature/glass cards, price cards, hero image */
  --radius-full: 9999px;   /* pill — badges ("PIÙ POPOLARE" ribbon, nav CTA on mobile), step-icon circles */
  --radius-hero-banner: 40px; /* arbitrary rounded-[40px] — ONLY the closing "Pronto a svuotare il rullino?" CTA banner section, no other use found */

  /* ---------- Shadows ----------
     No custom boxShadow key exists in the generated tailwind.config's
     "extend" block — every shadow-* class in the markup resolves to
     Tailwind's built-in (stock) box-shadow values. Listed here as their
     literal resolved CSS since this project isn't using the Tailwind CDN
     script at runtime. */
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* feature-card hover */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* buttons, accordion-item hover */
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* hero primary button hover, FREE price card hover */
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* PRO price card (permanent), hero device image drop-shadow */
  /* PRO CTA button uses shadow-lg tinted at the primary color, 30% opacity
     (Tailwind's arbitrary shadow-color utility: "shadow-lg shadow-primary/30") */
  --shadow-primary-tint: 0 10px 15px -3px rgba(70, 72, 212, 0.3), 0 4px 6px -4px rgba(70, 72, 212, 0.3);

  /* ---------- Motion ---------- */
  --transition-fast: 200ms;     /* nav link hover (transition-colors duration-200) */
  --transition-shadow-hover: 300ms; /* accordion-item shadow hover, step-icon hover fill */
  --transition-scroll-reveal: 1000ms; /* section fade/slide-in on scroll (IntersectionObserver-driven) */
  --transition-accordion: 300ms ease-out; /* accordion max-height/padding transition */
}