/*!
 * AllCreteTransfers — Design tokens
 * v0.8.0 — Design 1 polished direction (navy hero + blue primary + teal italic accent)
 * See preview-H.html for the canonical reference.
 */

:root {
  /* Surfaces */
  --bg-canvas:    #FFFFFF;
  --bg-soft:      #F7F9FB;
  --bg-softer:    #FAFBFC;
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #FFFFFF;

  /* Dark hero / dark sections */
  --bg-dark:           #0B1729;
  --bg-dark-2:         #0F1E36;
  --bg-dark-3:         #142845;
  --rule-on-dark:      rgba(255,255,255,0.10);
  --text-on-dark:      #F8FAFC;
  --text-on-dark-muted:#B6C2D2;

  /* Text */
  --text-primary: #0F172A;
  --text-soft:    #1E293B;
  --text-muted:   #475569;
  --text-faint:   #94A3B8;

  /* Lines */
  --rule:         #E5EAF0;
  --rule-strong:  #CBD5E1;

  /* Primary accent — deep confident blue (design 1 CTA) */
  --accent-ink:        #1E5BD8;
  --accent-ink-hover:  #1947B3;
  --accent-ink-soft:   #E8EFFD;
  --accent-ink-text:   #FFFFFF;

  /* Secondary accent — teal (italic-serif accents, hover, footer hints) */
  --accent-teal:       #14B8A6;
  --accent-teal-hover: #0D9488;
  --accent-teal-soft:  #E0F6F2;
  --accent-teal-text:  #FFFFFF;

  /* Warm cream — used very sparingly (hero italic, eyebrow dot, accent flourishes) */
  --accent-warm:       #E8C896;

  /* WhatsApp green */
  --whatsapp:          #25D366;
  --whatsapp-dark:     #128C7E;

  /* Semantic */
  --ok:    #16A34A;
  --warn:  #D97706;
  --err:   #DC2626;
  --info:  #14B8A6;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:    0 4px 16px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg:    0 28px 56px rgba(15,23,42,0.10), 0 0 0 1px rgba(30,91,216,0.06);
  --shadow-cta:   0 14px 32px rgba(30,91,216,0.40), 0 2px 6px rgba(30,91,216,0.20);
  --shadow-photo: 0 24px 64px rgba(15,23,42,0.18);

  /* Spacing — 8px base */
  --space-2xs:   4px;
  --space-xs:    8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  96px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --content-max:    1320px;
  --content-pad-x:    32px;

  color-scheme: light;
}

@media (max-width: 720px) {
  :root { --content-pad-x: 20px; }
}