/* =================================================================
   g-tokens-checkout.css - THE ONE authoritative brand token file of
   this checkout theme (added 2026-08-26, token centralization).
   Values MIRROR the main site theme taylor/assets/g-tokens.css and
   the shared checkout skin. The two themes are NOT linked: if the
   main site's tokens ever change, THIS file must be updated by hand
   in BOTH checkout themes. Canonical anchors: paper #FBF6EC,
   ivory #F5EEE0, brass #B89860, ink #2C2A26, cream text #F5EFE0,
   deep warm #3F3327, rule rgba(184,152,96,0.22), radius 5px.
   Loaded render-blocking in global_head.liquid BEFORE overrides.css
   and before the accessibility snippet, so every checkout component
   consumes these definitions. Do not redefine :root tokens anywhere
   else in this theme.
   ================================================================= */
/* ---- Ported Guarip design tokens (source: taylor/assets/g-tokens.css) ---- */
:root {
  /* Color */
  --g-ivory:           #F5EEE0;
  --g-sand:            #ECE3CC;
  --g-paper:           #FBF6EC;
  --g-deep:            #2C4F46;
  --g-deep-soft:       #3D5C53;
  --g-deep-warm:       #3F3327;
  --g-deep-warm-soft:  #4A3E32;
  --g-rose:            #C58B7E;
  --g-terracotta:      #A65A4D;
  --g-olive:           #A2A084;
  --g-brass:           #B89860;
  --g-brass-soft:      rgba(184, 152, 96, 0.5);
  --g-turquoise:       #0891B2;
  --g-turquoise-deep:  #0E7490;
  --g-ink:             #2C2A26;
  --g-cream-text:      #F5EFE0;
  --g-muted:           #7A7163;

  /* derived alpha tints */
  --g-ink-a08:  rgba(44, 42, 38, 0.08);
  --g-ink-a16:  rgba(44, 42, 38, 0.16);
  --g-ink-a18:  rgba(44, 42, 38, 0.18);
  --g-ink-a40:  rgba(44, 42, 38, 0.40);
  --g-ink-a55:  rgba(44, 42, 38, 0.55);
  --g-ink-a70:  rgba(44, 42, 38, 0.70);
  --g-rule:     rgba(184, 152, 96, 0.22);
  --g-cream-a40: rgba(245, 239, 224, 0.40);
  --g-cream-a70: rgba(245, 239, 224, 0.70);
  --g-cream-a90: rgba(245, 239, 224, 0.90);

  /* Typography */
  --g-font-display-ar: 'Reem Kufi', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --g-font-body-ar:    'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-font-display-en: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --g-font-body-en:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-font-latin:      'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --g-font-label:      'Inter', system-ui, sans-serif;

  --g-fs-display-xl:   clamp(40px, 7vw, 112px);
  --g-fs-display-lg:   clamp(34px, 5.2vw, 80px);
  --g-fs-display-md:   clamp(28px, 4vw, 56px);
  --g-fs-body-lg:      clamp(16px, 1.15vw, 19px);
  --g-fs-body:         clamp(15px, 1vw, 17px);
  --g-fs-body-sm:      clamp(13px, 0.9vw, 15px);
  --g-fs-label:        clamp(11px, 0.78vw, 12.5px);
  --g-fs-meta:         clamp(11.5px, 0.8vw, 13px);

  --g-lh-display:      1.14;
  --g-lh-snug:         1.4;
  --g-lh-body:         1.7;

  --g-ls-label:        0.18em;
  --g-ls-wordmark:     0.22em;
  --g-ls-display:      -0.01em;

  /* Spacing scale */
  --g-s1:  4px;
  --g-s2:  8px;
  --g-s3:  12px;
  --g-s4:  16px;
  --g-s5:  24px;
  --g-s6:  32px;
  --g-s7:  48px;
  --g-s8:  64px;
  --g-s9:  80px;
  --g-s10: 96px;
  --g-s11: 120px;
  --g-s12: 160px;

  /* Radius (brand decision, locked: rectangular surfaces site-wide) */
  --g-radius-button: 5px;
  --g-radius-card:   8px;
  --g-radius-input:  4px;

  /* Shadows */
  --g-shadow-1: 0 1px 2px rgba(44, 42, 38, 0.04);
  --g-shadow-2: 0 2px 8px rgba(44, 42, 38, 0.05);
  --g-shadow-3: 0 6px 22px rgba(44, 42, 38, 0.07);
  --g-shadow-4: 0 12px 36px rgba(44, 42, 38, 0.10);
  --g-shadow-5: 0 24px 56px rgba(44, 42, 38, 0.14);
  --g-shadow-frame: 0 16px 48px -12px rgba(44, 42, 38, 0.18), 0 4px 12px rgba(44, 42, 38, 0.06);

  /* Brass-frame motif */
  --g-frame-w: 1.5px;
  --g-frame-color: var(--g-brass);

  /* Motion */
  --g-dur-fast:   180ms;
  --g-dur-base:   280ms;
  --g-dur-slow:   520ms;
  --g-dur-cinema: 1200ms;

  --g-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --g-ease-out-back: cubic-bezier(0.34, 1.32, 0.64, 1);
  --g-ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --g-ease-spring:   cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --g-dur-fast:   0ms;
    --g-dur-base:   0ms;
    --g-dur-slow:   0ms;
    --g-dur-cinema: 0ms;
  }
}