@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..600&family=Poppins:wght@300;400;500;600&display=swap");
/* ---- fonts.css ---- */
/* Brand display + script faces ship with the system. Lora and Poppins come from Google Fonts,
   matching the faces embedded in COTTONS_Lookbook_Sept26.pdf and COTTONS_Direction_Artistique.pdf. */


@font-face{font-family:"Satisfy";src:url("assets/fonts/Satisfy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
/* ---- colors.css ---- */
:root{
  /* --- Brand magenta: the name, and only the name --- */
  --brand:#9E2965;              /* the brand colour — logotype, brand name, brand chrome */
  --brand-hover:#8A2258;        /* 8% darker, hover */
  --brand-ink:#6E1B46;          /* deep, for press states and text on pale grounds */

  /* --- Couleurs vives: the print palette --- */
  --fuchsia:#E0338A;
  --coquelicot:#D8322E;
  --safran:#D9A02B;
  --citron:#E6D93A;
  --turquoise:#2F8C8C;
  --vert-feuille:#3E8E4E;
  --indigo:#2C4E9A;

  /* --- Fonds: the calm grounds everything sits on --- */
  --chaux:#F4F1EA;              /* limewash */
  --papier-creme:#F6EEDF;       /* cream paper */
  --vert-de-gris:#A9BFB2;
  --rose-terre:#C9A49A;

  /* --- Neutrals, warm not grey --- */
  --ink-900:#241E1B;
  --ink-700:#4A403A;
  --ink-500:#7A6E66;
  --ink-300:#B6ABA2;
  --ink-100:#E4DCD1;
  --paper:#FFFDF8;

  /* --- Semantic aliases --- */
  --text-body:var(--ink-700);
  --text-strong:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-inverse:var(--paper);
  --text-brand:var(--brand);
  --text-link:var(--brand);
  --text-link-hover:var(--fuchsia);

  --surface-page:var(--chaux);
  --surface-card:var(--paper);
  --surface-sunk:var(--papier-creme);
  --surface-brand:var(--brand);
  --surface-accent:var(--fuchsia);
  --surface-quiet:var(--vert-de-gris);

  --border-hairline:var(--ink-100);
  --border-strong:var(--ink-300);
  --border-brand:var(--brand);

  --focus-ring:var(--fuchsia);
  --status-sale:var(--coquelicot);
  --status-new:var(--turquoise);
  --status-sold-out:var(--ink-500);
}

/* ---- typography.css ---- */
:root{
  /* Families. Monstice Inline is the logotype face; Monstice Base for rare oversized display.
     Lora carries headings, Poppins all information, Satisfy the single handwritten accent. */
  --font-logo:"Monstice Inline","Monstice",Lora,serif;
  --font-display:"Monstice",Lora,serif;
  --font-serif:Lora,Georgia,serif;
  --font-sans:Poppins,"Helvetica Neue",Arial,sans-serif;
  --font-script:Satisfy,"Segoe Script",cursive;

  /* Scale: 1.25 on a 16px base, rounded to whole px */
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:22px;
  --text-xl:28px;
  --text-2xl:36px;
  --text-3xl:46px;
  --text-4xl:60px;
  --text-5xl:78px;

  --leading-tight:1.08;
  --leading-snug:1.25;
  --leading-body:1.6;
  --leading-loose:1.8;

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-label:0.18em;   /* COTTONS / CHAPITRE 01 / navigation */

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;

  /* Semantic type roles */
  --type-hero-family:var(--font-serif);
  --type-hero-size:var(--text-4xl);
  --type-heading-family:var(--font-serif);
  --type-body-family:var(--font-sans);
  --type-body-size:var(--text-base);
  --type-label-family:var(--font-sans);
  --type-label-size:var(--text-2xs);
  --type-accent-family:var(--font-script);
}

/* ---- spacing.css ---- */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  --gutter-page:24px;          /* mobile page gutter */
  --gutter-page-lg:56px;       /* desktop page gutter */
  --measure-prose:62ch;
  --content-max:1280px;
  --grid-gap:20px;
  --section-gap:var(--space-9);
  --stripe-width:6px;          /* the striped border rhythm */
}

/* ---- borders.css ---- */
:root{
  /* Corners stay nearly square: printed cloth, cards and labels, not app chrome */
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-pill:999px;

  --border-width-hair:1px;
  --border-width-rule:2px;
  --border-width-frame:6px;    /* the striped frame around imagery */

  /* Shadows are soft and warm, used sparingly: cloth on a table, not floating glass */
  --shadow-none:none;
  --shadow-raise:0 1px 2px rgba(36,30,27,.06);
  --shadow-card:0 8px 24px -12px rgba(36,30,27,.18);
  --shadow-lift:0 18px 40px -20px rgba(36,30,27,.28);
  --shadow-inset-hair:inset 0 0 0 1px var(--border-hairline);

  /* Striped rules, drawn not decorated */
  --stripe-fuchsia:repeating-linear-gradient(90deg,var(--fuchsia) 0 6px,transparent 6px 12px);
  --stripe-brand:repeating-linear-gradient(90deg,var(--brand) 0 6px,transparent 6px 12px);
  --stripe-safran:repeating-linear-gradient(90deg,var(--safran) 0 6px,transparent 6px 12px);
}

/* ---- motion.css ---- */
:root{
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out-soft:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --transition-hover:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard);
  --transition-media:transform var(--duration-slow) var(--ease-out-soft),opacity var(--duration-slow) var(--ease-out-soft);
}

/* ---- base.css ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-light);line-height:var(--leading-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:var(--weight-regular);color:var(--text-strong);line-height:var(--leading-snug);margin:0 0 var(--space-4)}
h1{font-size:var(--text-3xl);line-height:var(--leading-tight)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-lg)}
h4{font-size:var(--text-md)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid currentColor;transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
::selection{background:var(--citron);color:var(--ink-900)}
.ds-label{font-family:var(--font-sans);font-size:var(--type-label-size);font-weight:var(--weight-medium);letter-spacing:var(--tracking-label);text-transform:uppercase}
.ds-script{font-family:var(--font-script);font-weight:400}