/* ==========================================================================
   CASA ROVESTO — Design Tokens
   Handle: cr-tokens. Single source of truth for color, type, space, radii,
   shadow, motion and z-index. Everything else (cr-store, cr-app-shell,
   cr-cart-checkout) consumes these custom properties.

   "rovesto" = inside-out. The system is editorial, restrained, neutral:
   near-black ink on warm off-white paper with ONE muted accent. These are
   tasteful PLACEHOLDER values — the real palette arrives from the client.
   Swap the six brand vars below and the whole storefront re-skins.
   ========================================================================== */

:root {
  /* ── Brand palette (PLACEHOLDER — replace from client brand guide) ── */
  --cr-color-ink:        #16130F;   /* near-black, warm — primary text / hero */
  --cr-color-paper:      #F4F0E9;   /* warm off-white — page background */
  --cr-color-primary:    #1C1814;   /* deep espresso — primary surfaces/buttons */
  --cr-color-secondary:  #8A8275;   /* taupe grey — secondary text / lines */
  --cr-color-accent:     #9A5B3F;   /* restrained terracotta — single accent */
  --cr-color-muted:      #B7AFA1;   /* muted sand — disabled / hints */

  /* ── Neutral ramp (derived feel; explicit for old browsers) ── */
  --cr-paper-1:  #FBF8F2;   /* lifted surface (cards) */
  --cr-paper-2:  #F4F0E9;   /* base paper */
  --cr-paper-3:  #EAE4D9;   /* sunken / hairline fills */
  --cr-line:     #E0D9CC;   /* hairline borders */
  --cr-line-strong: #C9C0AF;

  /* ── Semantic aliases (other modules reference these) ── */
  --cr-color-text:  var(--cr-color-ink);    /* body text alias */
  --cr-color-bg:    var(--cr-color-paper);  /* page background alias */
  --cr-color-link:  var(--cr-color-accent); /* inline link color */
  --cr-color-focus: var(--cr-color-accent); /* focus ring color */

  /* ── Functional ── */
  --cr-color-success: #4E6F52;
  --cr-color-error:   #9B3B33;
  --cr-color-sale:    #9A5B3F;   /* reuse accent for price-drop */

  /* ── Accent derivations (color-mix where supported; fallbacks above) ── */
  --cr-accent-soft:  var(--cr-color-accent);   /* fallback */
  --cr-accent-tint:  var(--cr-paper-3);         /* fallback */
  --cr-accent-ink:   var(--cr-color-accent);    /* fallback */
  --cr-ink-soft:     var(--cr-color-secondary); /* fallback */
  --cr-ink-faint:    var(--cr-color-muted);     /* fallback */
  --cr-on-accent:    var(--cr-color-paper);     /* text over accent */
  --cr-on-primary:   var(--cr-color-paper);     /* text over primary surface */

  /* ── Type families ──
     Editorial: a serif display + a clean grotesque text face. System stacks
     so nothing breaks before the brand webfonts are wired via CR_Assets. */
  --cr-font-display: 'Fraunces', 'Canela', Georgia, 'Times New Roman', serif;
  --cr-font-text:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cr-font-body:    var(--cr-font-text);   /* body alias used by the app shell reset */
  --cr-font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Type scale (fluid, mobile-first; clamp() min/preferred/max) ── */
  --cr-font-size-base: var(--cr-text-base);   /* 15px — body reset alias */

  --cr-text-xs:   0.6875rem;                              /* 11px — eyebrows/meta */
  --cr-text-sm:   0.8125rem;                              /* 13px */
  --cr-text-base: 0.9375rem;                              /* 15px — body */
  --cr-text-md:   clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16–18 */
  --cr-text-lg:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); /* 20–24 */
  --cr-text-xl:   clamp(1.6rem, 1.3rem + 1.6vw, 2.25rem); /* 26–36 */
  --cr-text-2xl:  clamp(2.1rem, 1.5rem + 3vw, 3.5rem);    /* 34–56 */
  --cr-text-3xl:  clamp(2.6rem, 1.6rem + 5vw, 5rem);      /* 42–80 hero */

  --cr-leading-tight: 1.05;
  --cr-leading-snug:  1.2;
  --cr-leading-body:  1.6;
  --cr-line-base:     var(--cr-leading-body); /* line-height alias used by body reset */
  --cr-tracking-tight: -0.02em;
  --cr-tracking-wide:  0.14em;   /* eyebrows / mono labels */
  --cr-weight-regular: 400;
  --cr-weight-medium:  500;
  --cr-weight-semibold: 600;
  --cr-weight-bold:    700;

  /* ── Spacing scale (4px base) ── */
  --cr-space-0:  0;
  --cr-space-1:  0.25rem;   /* 4 */
  --cr-space-2:  0.5rem;    /* 8 */
  --cr-space-3:  0.75rem;   /* 12 */
  --cr-space-4:  1rem;      /* 16 */
  --cr-space-5:  1.5rem;    /* 24 */
  --cr-space-6:  2rem;      /* 32 */
  --cr-space-7:  3rem;      /* 48 */
  --cr-space-8:  4rem;      /* 64 */
  --cr-space-9:  6rem;      /* 96 */
  --cr-space-10: 8rem;      /* 128 */

  /* ── Layout ── */
  --cr-container:      1280px;
  --cr-content-max:    var(--cr-container); /* max-width alias */
  --cr-container-text: 68ch;     /* editorial reading width */
  --cr-gutter:         var(--cr-space-4);
  --cr-touch:          44px;     /* minimum touch target */

  /* ── Radii (editorial = mostly square; tiny softening only) ── */
  --cr-radius-none: 0;
  --cr-radius-xs:   2px;
  --cr-radius-sm:   4px;
  --cr-radius-md:   8px;
  --cr-radius-pill: 999px;

  /* ── Shadows (low, warm, restrained) ── */
  --cr-shadow-xs: 0 1px 2px rgba(22, 19, 15, 0.05);
  --cr-shadow-sm: 0 2px 8px rgba(22, 19, 15, 0.06);
  --cr-shadow-md: 0 8px 28px rgba(22, 19, 15, 0.10);
  --cr-shadow-lg: 0 18px 50px rgba(22, 19, 15, 0.16);
  --cr-shadow-focus: 0 0 0 3px rgba(154, 91, 63, 0.22);   /* accent ring */

  /* ── Motion ── */
  --cr-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --cr-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --cr-dur-fast:   0.16s;
  --cr-dur-base:   0.24s;
  --cr-dur-slow:   0.4s;

  /* ── Z-index tokens ── */
  --cr-z-base:    0;
  --cr-z-sticky:  100;
  --cr-z-header:  200;
  --cr-z-dock:    300;
  --cr-z-overlay: 900;
  --cr-z-modal:   1000;
  --cr-z-toast:   1100;
  --cr-z-max:     2147483000;
}

/* ── color-mix progressive enhancement: refine accent/ink derivations on
   browsers that support it; falls back to the explicit vars above. ── */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --cr-accent-soft: color-mix(in srgb, var(--cr-color-accent) 78%, var(--cr-color-ink));
    --cr-accent-tint: color-mix(in srgb, var(--cr-color-accent) 12%, var(--cr-color-paper));
    --cr-accent-ink:  color-mix(in srgb, var(--cr-color-accent) 88%, var(--cr-color-ink));
    --cr-ink-soft:    color-mix(in srgb, var(--cr-color-ink) 62%, var(--cr-color-paper));
    --cr-ink-faint:   color-mix(in srgb, var(--cr-color-ink) 38%, var(--cr-color-paper));
    --cr-line:        color-mix(in srgb, var(--cr-color-ink) 12%, var(--cr-color-paper));
    --cr-line-strong: color-mix(in srgb, var(--cr-color-ink) 24%, var(--cr-color-paper));
    --cr-paper-1:     color-mix(in srgb, var(--cr-color-paper) 60%, #ffffff);
    --cr-paper-3:     color-mix(in srgb, var(--cr-color-paper) 88%, var(--cr-color-ink));
  }
}

/* ── Optional dark "inverted" surface (rovesto = inside-out). Opt-in via a
   container class so it never forces global dark mode. ── */
.cr-invert {
  --cr-color-ink:   #F4F0E9;
  --cr-color-paper: #16130F;
  --cr-paper-1:     #211C16;
  --cr-paper-2:     #16130F;
  --cr-paper-3:     #0F0D0A;
  --cr-line:        rgba(244, 240, 233, 0.12);
  --cr-line-strong: rgba(244, 240, 233, 0.24);
  --cr-color-secondary: #B7AFA1;
  --cr-color-muted: #6E665A;
  --cr-on-primary:  #16130F;
  color: var(--cr-color-ink);
  background: var(--cr-color-paper);
}

/* Honor user motion preference at the token layer too. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cr-dur-fast: 0.001s;
    --cr-dur-base: 0.001s;
    --cr-dur-slow: 0.001s;
  }
}