/* ════════════════════════════════════════════════════════════
   H'isy Friperie — Design System (bundle exact)
   Concaténation de : tokens/fonts.css + tokens/colors.css + tokens/typography.css + tokens/spacing.css + base.css
   Polices chargées depuis Google Fonts (Fraunces, Inter, Satisfy).
   ════════════════════════════════════════════════════════════ */


/* ===== tokens/fonts.css ===== */
/* ================================================================
   H'ISY FRIPERIE — FONTS
   Display : Fraunces — soft "old-style" serif (opsz + SOFT + WONK)
             warm, retro-editorial character that echoes the 70s
             script logo. Used for headings & prices.
   Body    : Inter — neutral, highly legible UI sans. The clean
             counterweight to Fraunces' expressive serif.
   Script  : Satisfy — casual script, decorative accents only.
   ----------------------------------------------------------------
   NOTE: the wordmark logo (assets/img/logo.png) is a chunky 1970s
   rounded-script display face we do not have as a file. Always use
   the LOGO IMAGE for the brand mark; never re-typeset the name.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Inter:wght@300..700&family=Satisfy&display=swap');

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-script:  'Satisfy', 'Brush Script MT', cursive;

  /* Fraunces variable-axis presets */
  --fraunces-display: 'opsz' 144, 'SOFT' 40, 'WONK' 1; /* @kind font */
  --fraunces-text:    'opsz' 28,  'SOFT' 20, 'WONK' 0; /* @kind font */
}


/* ===== tokens/colors.css ===== */
/* ================================================================
   H'ISY FRIPERIE — COLOR TOKENS
   A warm, earthy thrift-store palette: roasted caramel, dark
   chocolate brown, and soft cream. Sourced from the live
   storefront (assets/css/style.css).
   ================================================================ */

:root {
  /* ── Brand — Caramel (primary accent) ── */
  --caramel:        #C8956A;   /* primary brand caramel        */
  --caramel-light:  #D9A87C;   /* hover / tints / new badges   */
  --caramel-dark:   #A8734E;   /* active / eyebrow text        */

  /* ── Brand — Brown (ink + dark surfaces) ── */
  --brown:          #2D1505;   /* primary ink, dark sections   */
  --brown-mid:      #4A2510;   /* hover on brown               */
  --brown-light:    #6B3A1F;   /* tertiary brown               */

  /* ── Brand — Cream (light surfaces) ── */
  --cream:          #F5ECD7;   /* primary cream surface        */
  --cream-dark:     #E8D4B4;   /* borders, deeper cream        */
  --cream-light:    #FDF8F2;   /* page background, lightest    */

  /* ── Neutrals derived from brown ── */
  --white:          #FFFFFF;
  --border:         #E8D4B4;   /* hairline borders             */
  --text:           #2D1505;   /* body ink                     */
  --muted:          #5C4A3A;   /* secondary text               */
  --light:          #A8906E;   /* tertiary / placeholder text  */

  /* ── Semantic — feedback ── */
  --green:          #2E7D32;   /* success                      */
  --green-bg:       #E8F5E9;   /* success surface              */
  --red:            #B71C1C;   /* error / promo                */
  --red-bg:         #FFEBEE;   /* error surface                */
  --star:           #F59E0B;   /* review stars (amber)         */

  /* ── Channel / utility ── */
  --whatsapp:       #25D366;   /* WhatsApp green (commerce)    */

  /* ================================================================
     SEMANTIC ALIASES — prefer these in components
     ================================================================ */
  --bg-page:        var(--cream-light);
  --bg-section:     var(--cream);
  --bg-inverse:     var(--brown);
  --surface-card:   var(--white);
  --surface-sunken: var(--cream);

  --text-heading:   var(--brown);
  --text-body:      var(--muted);
  --text-strong:    var(--brown);
  --text-muted:     var(--light);
  --text-on-dark:   var(--cream);
  --text-on-accent: var(--white);

  --accent:         var(--caramel);
  --accent-hover:   var(--caramel-dark);
  --accent-soft:    rgba(200, 149, 106, 0.12);

  --border-default: var(--border);
  --border-focus:   var(--caramel);

  /* Aliases used by storefront sliders (legacy --c1/--c2) */
  --c1: var(--caramel);
  --c2: var(--brown);
}


/* ===== tokens/typography.css ===== */
/* ================================================================
   H'ISY FRIPERIE — TYPOGRAPHY TOKENS
   Type scale, weights, tracking. Display in Playfair, UI in DM Sans.
   ================================================================ */

:root {
  /* ── Font sizes (rem, base 16px) ── */
  --text-xs:   0.72rem;   /* 11.5px — micro labels, SKUs        */
  --text-sm:   0.82rem;   /* 13px   — meta, captions            */
  --text-base: 0.9rem;    /* 14.4px — body, controls            */
  --text-md:   1rem;      /* 16px   — emphasised body           */
  --text-lg:   1.2rem;    /* 19px   — h3, card titles           */
  --text-xl:   1.5rem;    /* 24px   — section sub-heads          */
  --text-2xl:  2.3rem;    /* h2 (fluid cap)                     */
  --text-3xl:  3.6rem;    /* h1 (fluid cap)                     */

  /* ── Fluid display sizes ── */
  --display-h1: clamp(2rem, 5vw, 3.6rem);   /* @kind font */
  --display-h2: clamp(1.5rem, 3vw, 2.3rem); /* @kind font */
  --display-h3: 1.2rem;                      /* @kind font */

  /* ── Weights ── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;   /* Playfair display headings        */

  /* ── Line heights ── */
  --leading-tight:   1.15;  /* display headings                 */
  --leading-snug:    1.4;
  --leading-normal:  1.65;  /* body                             */
  --leading-relaxed: 1.8;   /* long-form prose                  */

  /* ── Letter spacing ── */
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrows           */
  --tracking-wide:    0.08em;
  --tracking-normal:  0;
}


/* ===== tokens/spacing.css ===== */
/* ================================================================
   H'ISY FRIPERIE — SPACING, RADII, SHADOWS, LAYOUT
   ================================================================ */

:root {
  /* ── Spacing scale (px) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Vertical rhythm for full-width sections */
  --section-py: clamp(48px, 7vw, 88px); /* @kind spacing */

  /* ── Border radii ── */
  --r-sm:   6px;     /* inputs, small chips           */
  --r:      12px;    /* default — buttons, fields     */
  --r-lg:   20px;    /* cards, product tiles          */
  --r-pill: 9999px;  /* badges, pills, nav links      */

  /* ── Shadows — warm brown-tinted, never neutral grey ── */
  --sh-sm: 0 2px 8px rgba(45, 21, 5, 0.07);
  --sh:    0 6px 24px rgba(45, 21, 5, 0.11);
  --sh-lg: 0 16px 48px rgba(45, 21, 5, 0.16);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(200, 149, 106, 0.12);

  /* ── Borders ── */
  --border-width:   1px;
  --border-width-2: 1.5px;   /* form controls, chips         */

  /* ── Layout ── */
  --nav-h: 68px;
  --max-w: 1440px;     /* default container             */
  --max-w-md: 1000px;
  --max-w-sm: 820px;
  --container-px: 32px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --dur-fast: 0.2s; /* @kind other */
  --dur:      0.3s; /* @kind other */
  --dur-slow: 0.6s; /* @kind other */
}


/* ===== base.css ===== */
/* ================================================================
   H'ISY FRIPERIE — BASE LAYER
   Reset, element defaults, and the storefront utility/component
   classes. Ported from the live site (assets/css/style.css) and
   re-pointed at the design-system tokens.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: var(--font-body); font-size: inherit; }

/* ── Containers ── */
.wrap    { max-width: var(--max-w);    margin: 0 auto; padding: 0 var(--container-px); }
.wrap-md { max-width: var(--max-w-md); margin: 0 auto; padding: 0 var(--container-px); }
.wrap-sm { max-width: var(--max-w-sm); margin: 0 auto; padding: 0 var(--container-px); }

/* ── Typography ── */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); line-height: var(--leading-tight); font-weight: var(--weight-black); font-optical-sizing: auto; letter-spacing: -0.01em; }
h1 { font-size: var(--display-h1); font-variation-settings: var(--fraunces-display); }
h2 { font-size: var(--display-h2); font-variation-settings: var(--fraunces-display); }
h3 { font-size: var(--display-h3); font-variation-settings: var(--fraunces-text); }
h4 { font-size: var(--text-md); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0; }
p  { color: var(--text-body); line-height: var(--leading-relaxed); }
.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--caramel-dark); display: block; margin-bottom: var(--space-2);
}
.script { font-family: var(--font-script); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 24px; border-radius: var(--r-pill); font-size: 0.875rem; font-weight: var(--weight-medium);
  cursor: pointer; border: 2px solid transparent; transition: all 0.22s var(--ease); white-space: nowrap;
}
.btn-primary       { background: var(--brown); color: var(--cream); }
.btn-primary:hover { background: var(--brown-mid); transform: translateY(-2px); box-shadow: var(--sh); }
.btn-caramel       { background: var(--caramel); color: var(--white); }
.btn-caramel:hover { background: var(--caramel-dark); transform: translateY(-2px); box-shadow: var(--sh); }
.btn-outline       { background: transparent; color: var(--brown); border-color: var(--brown); }
.btn-outline:hover { background: var(--brown); color: var(--cream); }
.btn-outline-cream       { background: transparent; color: var(--cream); border-color: rgba(245,236,215,.5); }
.btn-outline-cream:hover { background: var(--cream); color: var(--brown); }
.btn-ghost       { background: transparent; color: var(--caramel-dark); }
.btn-ghost:hover { background: var(--cream); }
.btn-wa       { background: var(--whatsapp); color: var(--white); }
.btn-wa:hover { filter: brightness(0.94); transform: translateY(-2px); box-shadow: var(--sh); }
.btn-sm   { padding: 8px 18px; font-size: 0.8rem; }
.btn-lg   { padding: 15px 34px; font-size: 0.95rem; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: var(--weight-semibold); }
.badge-car     { background: var(--caramel); color: #fff; }
.badge-brown   { background: var(--brown); color: var(--cream); }
.badge-cream   { background: var(--cream); color: var(--brown); border: 1px solid var(--border); }
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-new     { background: var(--caramel-light); color: var(--brown); }
.badge-promo   { background: var(--red); color: #fff; }

/* ── Forms ── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 0.82rem; font-weight: var(--weight-medium); color: var(--brown); }
.form-control {
  width: 100%; padding: 12px 15px; border: var(--border-width-2) solid var(--border);
  border-radius: var(--r); background: #fff; color: var(--text); font-size: 0.9rem;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
.form-control:focus { border-color: var(--border-focus); box-shadow: var(--ring); }
.form-control::placeholder { color: var(--light); }
.form-hint  { font-size: 0.75rem; color: var(--muted); }
.form-error { font-size: 0.75rem; color: var(--red); }

/* ── Cards ── */
.card { background: var(--surface-card); border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; }
.card-body  { padding: 24px; }
.card-hover { transition: all .3s; cursor: pointer; }
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--caramel); }

/* ── Section header ── */
.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head h2 { margin-bottom: 10px; }
.sec-head > p { max-width: 480px; margin: 0 auto; font-size: 0.95rem; }
.sec-line { width: 44px; height: 3px; background: var(--caramel); border-radius: 99px; margin: 12px auto 0; }

/* ── Chips / filters ── */
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 7px 15px; border-radius: var(--r-pill); border: var(--border-width-2) solid var(--border);
  background: #fff; font-size: 0.81rem; cursor: pointer; color: var(--muted); transition: all .2s;
}
.chip:hover, .chip.active { background: var(--brown); border-color: var(--brown); color: #fff; }

/* ── Breadcrumb ── */
.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; color: var(--muted); }
.breadcrumb a:hover { color: var(--caramel); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .cur { color: var(--brown); font-weight: var(--weight-medium); }

/* ── Flash / alerts ── */
.flash { padding: 12px 18px; border-radius: var(--r); font-size: 0.875rem; font-weight: var(--weight-medium); display: flex; align-items: center; gap: 10px; }
.flash-ok   { background: var(--green-bg); color: var(--green); }
.flash-err  { background: var(--red-bg); color: var(--red); }
.flash-info { background: var(--cream); color: var(--brown); border: 1px solid var(--border); }

/* ── Product card ── */
.p-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); transition: all .3s; position: relative; }
.p-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--caramel); }
.p-thumb { aspect-ratio: 3/4; background: linear-gradient(145deg, var(--cream-dark), var(--caramel-light)); position: relative; overflow: hidden; }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.p-card:hover .p-thumb img { transform: scale(1.05); }
.p-thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(45,21,5,.22); font-size: 2.4rem; }
.p-bads { position: absolute; top: 9px; left: 9px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.p-acts { position: absolute; top: 9px; right: 9px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(6px); transition: all .25s; z-index: 2; }
.p-card:hover .p-acts { opacity: 1; transform: none; }
.p-act-btn { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: none; cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh-sm); transition: all .2s; font-size: .9rem; color: var(--brown); }
.p-act-btn:hover { background: var(--caramel); color: #fff; }
.p-act-btn.active { background: var(--caramel); color: #fff; }
.p-info { padding: 13px 15px 15px; }
.p-stars { font-size: .72rem; color: var(--caramel); margin-bottom: 3px; }
.p-name { font-size: .88rem; font-weight: 600; color: var(--brown); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-meta { font-size: .73rem; color: var(--muted); margin-bottom: 7px; }
.p-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.p-price { display: flex; align-items: baseline; gap: 7px; }
.p-now { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--brown); font-variation-settings: var(--fraunces-text); }
.p-was { font-size: .76rem; text-decoration: line-through; color: var(--light); }
.p-cart { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; font-size: .95rem; background: var(--accent-soft); color: var(--caramel-dark); transition: all .2s; }
.p-cart:hover { background: var(--caramel); color: #fff; }
.p-cart.in-cart { background: var(--caramel); color: #fff; }

/* ── Reveal on scroll (optional, opt-in via .reveal + .in) ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }