/* Au clair de la Paume — design tokens + composants (extraits du design system) */

/* ==== tokens/colors.css ==== */
:root{
/* --- Bordeaux (primary) --- */
--bordeaux-950:#3C1013;--bordeaux-900:#4A1518;--bordeaux-800:#5C1B20;--bordeaux-700:#732329;--bordeaux-600:#8E3239;--bordeaux-500:#A5464D;--bordeaux-400:#BD6A70;--bordeaux-300:#D59B9F;--bordeaux-200:#EAC9CC;--bordeaux-100:#F6E7E8;
/* --- Rose poudré (secondary) --- */
--rose-50:#FFF7FA;--rose-100:#FFE6EE;--rose-200:#FBD3DF;--rose-300:#F2B7C8;--rose-400:#E294AB;
/* --- Warm neutrals --- */
--cream-50:#FDFAF7;--cream-100:#FBF6F2;--sand-200:#F0E6DD;--sand-300:#E2D3C7;--taupe-400:#C9B8AC;--stone-500:#8A7A70;--stone-600:#6B5D55;--ink-800:#3A2C28;--ink-900:#2A1F1D;
/* --- Semantic accents (muted, never clinical) --- */
--sage-500:#5F7A58;--sage-100:#E7EDE4;--amber-500:#C58A3D;--amber-100:#F7ECDC;--alert-500:#A33A3A;--alert-100:#F6E3E3;

/* --- Brand aliases --- */
--brand:var(--bordeaux-700);--brand-deep:var(--bordeaux-900);--brand-soft:var(--rose-100);--brand-accent:var(--rose-300);

/* --- Semantic surface / text --- */
--surface-page:var(--cream-100);
--surface-card:#FFFFFF;
--surface-soft:var(--rose-50);
--surface-rose:var(--rose-100);
--surface-sand:var(--sand-200);
--surface-deep:var(--bordeaux-700);
--surface-deepest:var(--bordeaux-900);
--surface-overlay:rgba(58,44,40,.44);

--text-heading:var(--bordeaux-700);
--text-body:var(--ink-800);
--text-muted:var(--stone-500);
--text-on-deep:var(--rose-100);
--text-on-deep-muted:rgba(255,230,238,.72);
--text-link:var(--bordeaux-700);
--text-link-hover:var(--bordeaux-500);

--border-hairline:var(--sand-300);
--border-soft:var(--rose-200);
--border-strong:var(--bordeaux-700);
--border-on-deep:rgba(255,230,238,.28);

--focus-ring:var(--bordeaux-400);
}


/* ==== tokens/typography.css ==== */
:root{
/* families */
--font-display:"Yeseva One",Cooper Black,Georgia,serif;
--font-script:"Parisienne","Brush Script MT",cursive;
--font-body:"Nunito Sans",-apple-system,"Segoe UI",sans-serif;

/* sizes — 1.25 major-third-ish ramp, generous for a calm reading rhythm */
--text-2xs:.75rem;--text-xs:.8125rem;--text-sm:.9375rem;--text-base:1.0625rem;--text-lg:1.1875rem;--text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--text-4xl:3rem;--text-5xl:3.75rem;--text-6xl:4.75rem;

/* weights */
--weight-light:300;--weight-regular:400;--weight-semibold:600;--weight-bold:700;

/* line heights */
--leading-tight:1.05;--leading-snug:1.22;--leading-normal:1.5;--leading-relaxed:1.7;

/* tracking */
--tracking-display:-.015em;--tracking-normal:0;--tracking-wide:.06em;--tracking-caps:.16em;

/* composed roles */
--type-display-lg:var(--weight-regular) var(--text-6xl)/var(--leading-tight) var(--font-display);
--type-display:var(--weight-regular) var(--text-4xl)/var(--leading-snug) var(--font-display);
--type-heading:var(--weight-regular) var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-signature:var(--weight-regular) var(--text-2xl)/1.35 var(--font-script);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-body);
--type-body-lg:var(--weight-light) var(--text-lg)/var(--leading-relaxed) var(--font-body);
--type-label:var(--weight-semibold) var(--text-xs)/1.2 var(--font-body);
--type-eyebrow:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-body);
}


/* ==== tokens/spacing.css ==== */
:root{
--space-0:0;--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;--space-24:96px;--space-32:128px;
--gutter:var(--space-6);
--section-y:var(--space-24);
--section-y-tight:var(--space-16);
--container-max:1160px;
--container-narrow:720px;
--container-prose:62ch;
}


/* ==== tokens/radius.css ==== */
:root{
--radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;--radius-pill:999px;
--radius-card:var(--radius-lg);
--radius-input:var(--radius-pill);
--radius-button:var(--radius-pill);
--radius-image:var(--radius-xl);
/* organic blob: used on portrait / imagery masks */
--radius-organic:56% 44% 52% 48% / 46% 52% 48% 54%;
--border-width:1px;--border-width-strong:1.5px;
}


/* ==== tokens/elevation.css ==== */
:root{
/* shadows are warm-tinted, never neutral grey */
--shadow-xs:0 1px 2px rgba(115,35,41,.06);
--shadow-sm:0 2px 8px rgba(115,35,41,.07);
--shadow-md:0 8px 24px -6px rgba(115,35,41,.12);
--shadow-lg:0 18px 48px -12px rgba(115,35,41,.18);
--shadow-glow-rose:0 0 0 6px rgba(255,230,238,.9);
--shadow-inset-soft:inset 0 1px 0 rgba(255,255,255,.6);
--ring-focus:0 0 0 3px rgba(189,106,112,.45);
--overlay-scrim:linear-gradient(to top,rgba(74,21,24,.72),rgba(74,21,24,0) 62%); /* @kind other */
--blur-soft:blur(14px); /* @kind other */
}


/* ==== tokens/motion.css ==== */
:root{
--ease-soft:cubic-bezier(.32,.72,.28,1); /* @kind other */
--ease-out:cubic-bezier(.16,.84,.44,1); /* @kind other */
--ease-in-out:cubic-bezier(.6,.04,.34,1); /* @kind other */
--dur-instant:120ms; /* @kind other */
--dur-fast:220ms; /* @kind other */
--dur-base:360ms; /* @kind other */
--dur-slow:640ms; /* @kind other */
--dur-drift:1400ms; /* @kind other */

--transition-base:all var(--dur-fast) var(--ease-soft); /* @kind other */
--transition-soft:all var(--dur-base) var(--ease-soft); /* @kind other */
--lift-hover:translateY(-2px); /* @kind other */
--press-scale:scale(.985); /* @kind other */
}


/* ==== tokens/base.css ==== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-regular);color:var(--text-heading);letter-spacing:var(--tracking-display);margin:0}
h1{font-size:var(--text-4xl);line-height:var(--leading-snug)}
h2{font-size:var(--text-3xl);line-height:var(--leading-snug)}
h3{font-size:var(--text-xl);line-height:var(--leading-snug)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--border-soft);transition:var(--transition-base)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
::selection{background:var(--rose-200);color:var(--bordeaux-900)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.acp-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.acp-signature{font:var(--type-signature);color:var(--brand)}


/* ==== components/acp-components.css ==== */
/* Au clair de la Paume — component styles. Imported by styles.css so consumers get them with the tokens. */

/* ---------- Button ---------- */
.acp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--weight-semibold) var(--text-sm)/1 var(--font-body);letter-spacing:.02em;border-radius:var(--radius-button);border:var(--border-width-strong) solid transparent;cursor:pointer;transition:var(--transition-base);text-decoration:none;white-space:nowrap}
.acp-btn:active{transform:var(--press-scale)}
.acp-btn:disabled,.acp-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;transform:none}
.acp-btn--sm{padding:9px 18px;font-size:var(--text-xs)}
.acp-btn--md{padding:13px 26px}
.acp-btn--lg{padding:17px 34px;font-size:var(--text-base)}
.acp-btn--primary{background:var(--bordeaux-700);color:var(--rose-100);box-shadow:var(--shadow-sm)}
.acp-btn--primary:hover:not(:disabled){background:var(--bordeaux-800);box-shadow:var(--shadow-md);transform:var(--lift-hover)}
.acp-btn--secondary{background:var(--rose-100);color:var(--bordeaux-700)}
.acp-btn--secondary:hover:not(:disabled){background:var(--rose-200);transform:var(--lift-hover)}
.acp-btn--outline{background:transparent;color:var(--bordeaux-700);border-color:var(--bordeaux-700)}
.acp-btn--outline:hover:not(:disabled){background:var(--bordeaux-700);color:var(--rose-100)}
.acp-btn--ghost{background:transparent;color:var(--bordeaux-700)}
.acp-btn--ghost:hover:not(:disabled){background:var(--rose-50)}
.acp-btn--onDeep{background:var(--rose-100);color:var(--bordeaux-800)}
.acp-btn--onDeep:hover:not(:disabled){background:#fff;transform:var(--lift-hover)}
.acp-btn--block{width:100%}

/* ---------- IconButton ---------- */
.acp-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);border:var(--border-width) solid transparent;cursor:pointer;transition:var(--transition-base);background:transparent;color:var(--bordeaux-700)}
.acp-iconbtn--sm{width:34px;height:34px}
.acp-iconbtn--md{width:44px;height:44px}
.acp-iconbtn--lg{width:52px;height:52px}
.acp-iconbtn--soft{background:var(--rose-100)}
.acp-iconbtn--outline{border-color:var(--border-soft)}
.acp-iconbtn:hover{background:var(--rose-200)}
.acp-iconbtn:active{transform:var(--press-scale)}
.acp-iconbtn--onDeep{color:var(--rose-100);border-color:var(--border-on-deep)}
.acp-iconbtn--onDeep:hover{background:rgba(255,230,238,.14)}

/* ---------- Icon ---------- */
.acp-icon{display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;flex:none}

/* ---------- Card ---------- */
.acp-card{background:var(--surface-card);border-radius:var(--radius-card);border:var(--border-width) solid var(--border-hairline);padding:var(--space-8);transition:var(--transition-soft)}
.acp-card--soft{background:var(--surface-soft);border-color:var(--border-soft)}
.acp-card--rose{background:var(--surface-rose);border-color:transparent}
.acp-card--deep{background:var(--surface-deep);border-color:transparent;color:var(--text-on-deep)}
.acp-card--deep .acp-card__title{color:var(--rose-100)}
.acp-card--outline{background:transparent;border-color:var(--border-soft)}
.acp-card--raised{box-shadow:var(--shadow-md);border-color:transparent}
.acp-card--interactive{cursor:pointer}
.acp-card--interactive:hover{transform:var(--lift-hover);box-shadow:var(--shadow-lg);border-color:var(--border-soft)}
.acp-card__title{font:var(--type-heading);color:var(--text-heading);margin:0 0 var(--space-2)}
.acp-card__body{font:var(--type-body);color:var(--text-body);margin:0}

/* ---------- Badge / Tag ---------- */
.acp-badge{display:inline-flex;align-items:center;gap:6px;font:var(--type-eyebrow);letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-pill)}
.acp-badge--brand{background:var(--bordeaux-700);color:var(--rose-100)}
.acp-badge--soft{background:var(--rose-100);color:var(--bordeaux-700)}
.acp-badge--outline{background:transparent;color:var(--bordeaux-700);box-shadow:inset 0 0 0 1px var(--border-soft)}
.acp-badge--sage{background:var(--sage-100);color:var(--sage-500)}
.acp-badge--amber{background:var(--amber-100);color:var(--amber-500)}
.acp-tag{display:inline-flex;align-items:center;gap:var(--space-2);font:var(--weight-regular) var(--text-sm)/1 var(--font-body);padding:9px 16px;border-radius:var(--radius-pill);background:var(--surface-card);color:var(--text-body);border:var(--border-width) solid var(--border-hairline);cursor:pointer;transition:var(--transition-base)}
.acp-tag:hover{border-color:var(--bordeaux-400);color:var(--text-heading)}
.acp-tag--selected{background:var(--bordeaux-700);border-color:var(--bordeaux-700);color:var(--rose-100)}
.acp-tag__remove{border:0;background:none;color:inherit;cursor:pointer;opacity:.6;padding:0;line-height:1;font-size:15px}
.acp-tag__remove:hover{opacity:1}

/* ---------- SectionHeading ---------- */
.acp-sh{display:flex;flex-direction:column;gap:var(--space-3)}
.acp-sh--center{align-items:center;text-align:center}
.acp-sh__eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.acp-sh__title{font:var(--type-display);color:var(--text-heading);margin:0}
.acp-sh__script{font:var(--type-signature);color:var(--bordeaux-500);margin:0}
.acp-sh__lede{font:var(--type-body-lg);color:var(--text-body);margin:0;max-width:var(--container-prose)}
.acp-sh--onDeep .acp-sh__title,.acp-sh--onDeep .acp-sh__script{color:var(--rose-100)}
.acp-sh--onDeep .acp-sh__lede{color:var(--text-on-deep-muted)}
.acp-sh--onDeep .acp-sh__eyebrow{color:var(--rose-300)}

/* ---------- Divider ---------- */
.acp-divider{display:flex;align-items:center;gap:var(--space-4);border:0;margin:var(--space-8) 0;color:var(--border-soft)}
.acp-divider::before,.acp-divider::after{content:"";flex:1;height:1px;background:currentColor}
.acp-divider__mark{width:52px;height:52px;opacity:.75}
.acp-divider--plain::before,.acp-divider--plain::after{background:var(--border-hairline)}

/* ---------- Logo ---------- */
.acp-logo{display:block;height:auto}

/* ---------- HandsMotif ---------- */
.acp-hands{display:block;pointer-events:none;user-select:none}

/* ---------- Form fields ---------- */
.acp-field{display:flex;flex-direction:column;gap:var(--space-2)}
.acp-field__label{font:var(--type-label);color:var(--text-heading);letter-spacing:.02em}
.acp-field__hint{font:var(--weight-regular) var(--text-xs)/1.4 var(--font-body);color:var(--text-muted)}
.acp-field__error{font:var(--weight-semibold) var(--text-xs)/1.4 var(--font-body);color:var(--alert-500)}
.acp-input{font:var(--weight-regular) var(--text-base)/1.4 var(--font-body);color:var(--text-body);background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-input);padding:13px 20px;transition:var(--transition-base);width:100%}
.acp-input::placeholder{color:var(--taupe-400)}
.acp-input:hover{border-color:var(--rose-300)}
.acp-input:focus{outline:none;border-color:var(--bordeaux-400);box-shadow:var(--ring-focus)}
.acp-input:disabled{background:var(--sand-200);color:var(--text-muted);cursor:not-allowed}
.acp-input--invalid{border-color:var(--alert-500)}
.acp-input--textarea{border-radius:var(--radius-md);min-height:120px;resize:vertical;padding:16px 20px}
.acp-select-wrap{position:relative;display:block}
.acp-select{appearance:none;padding-right:46px;cursor:pointer}
.acp-select-wrap__chevron{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--bordeaux-700);pointer-events:none}

/* ---------- Checkbox / Radio / Switch ---------- */
.acp-check{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font:var(--type-body);color:var(--text-body)}
.acp-check input{position:absolute;opacity:0;width:0;height:0}
.acp-check__box{width:22px;height:22px;flex:none;border-radius:var(--radius-xs);border:var(--border-width-strong) solid var(--border-soft);background:var(--surface-card);display:grid;place-items:center;transition:var(--transition-base);margin-top:2px}
.acp-check--radio .acp-check__box{border-radius:var(--radius-pill)}
.acp-check:hover .acp-check__box{border-color:var(--bordeaux-400)}
.acp-check input:checked+.acp-check__box{background:var(--bordeaux-700);border-color:var(--bordeaux-700)}
.acp-check input:focus-visible+.acp-check__box{box-shadow:var(--ring-focus)}
.acp-check__glyph{color:var(--rose-100);opacity:0;transition:var(--transition-base)}
.acp-check input:checked+.acp-check__box .acp-check__glyph{opacity:1}
.acp-check--radio .acp-check__glyph{width:8px;height:8px;border-radius:50%;background:var(--rose-100)}
.acp-check input:disabled+.acp-check__box{opacity:.4}
.acp-switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font:var(--type-body);color:var(--text-body)}
.acp-switch input{position:absolute;opacity:0;width:0;height:0}
.acp-switch__track{width:50px;height:28px;flex:none;border-radius:var(--radius-pill);background:var(--sand-300);padding:3px;transition:var(--transition-base)}
.acp-switch__thumb{width:22px;height:22px;border-radius:50%;background:var(--surface-card);box-shadow:var(--shadow-xs);transition:transform var(--dur-fast) var(--ease-soft)}
.acp-switch input:checked+.acp-switch__track{background:var(--bordeaux-700)}
.acp-switch input:checked+.acp-switch__track .acp-switch__thumb{transform:translateX(22px)}
.acp-switch input:focus-visible+.acp-switch__track{box-shadow:var(--ring-focus)}
.acp-switch input:disabled+.acp-switch__track{opacity:.45}

/* ---------- Tabs ---------- */
.acp-tabs{display:flex;gap:var(--space-2);padding:6px;background:var(--rose-50);border-radius:var(--radius-pill);border:var(--border-width) solid var(--border-soft)}
.acp-tabs__tab{border:0;background:transparent;font:var(--weight-semibold) var(--text-sm)/1 var(--font-body);color:var(--text-muted);padding:11px 22px;border-radius:var(--radius-pill);cursor:pointer;transition:var(--transition-base)}
.acp-tabs__tab:hover{color:var(--text-heading)}
.acp-tabs__tab[aria-selected="true"]{background:var(--bordeaux-700);color:var(--rose-100)}
.acp-tabs--underline{background:none;border:0;border-bottom:1px solid var(--border-hairline);border-radius:0;padding:0;gap:var(--space-6)}
.acp-tabs--underline .acp-tabs__tab{border-radius:0;padding:12px 2px;border-bottom:2px solid transparent}
.acp-tabs--underline .acp-tabs__tab[aria-selected="true"]{background:none;color:var(--text-heading);border-bottom-color:var(--bordeaux-700)}

/* ---------- Accordion ---------- */
.acp-acc{border-top:1px solid var(--border-hairline)}
.acp-acc__item{border-bottom:1px solid var(--border-hairline)}
.acp-acc__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);background:none;border:0;padding:var(--space-5) 0;cursor:pointer;text-align:left;font:var(--weight-regular) var(--text-lg)/1.35 var(--font-body);color:var(--text-heading);transition:var(--transition-base)}
.acp-acc__trigger:hover{color:var(--bordeaux-500)}
.acp-acc__sign{color:var(--bordeaux-700);transition:transform var(--dur-fast) var(--ease-soft)}
.acp-acc__item--open .acp-acc__sign{transform:rotate(45deg)}
.acp-acc__panel{font:var(--type-body);color:var(--text-body);padding:0 var(--space-10) var(--space-5) 0;max-width:var(--container-prose)}

/* ---------- Dialog ---------- */
.acp-dialog__scrim{position:fixed;inset:0;background:var(--surface-overlay);backdrop-filter:var(--blur-soft);display:grid;place-items:center;padding:var(--space-6);z-index:50;animation:acp-fade var(--dur-fast) var(--ease-soft)}
.acp-dialog{background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:520px;width:100%;padding:var(--space-10);position:relative;animation:acp-rise var(--dur-base) var(--ease-out)}
.acp-dialog__close{position:absolute;top:var(--space-4);right:var(--space-4)}
.acp-dialog__title{font:var(--type-heading);color:var(--text-heading);margin:0 0 var(--space-3)}
.acp-dialog__body{font:var(--type-body);color:var(--text-body)}
.acp-dialog__actions{display:flex;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-8)}

/* ---------- Toast ---------- */
.acp-toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--surface-card);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--space-4) var(--space-5);max-width:420px;animation:acp-rise var(--dur-base) var(--ease-out)}
.acp-toast__dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:var(--bordeaux-700)}
.acp-toast--success .acp-toast__dot{background:var(--sage-500)}
.acp-toast--warning .acp-toast__dot{background:var(--amber-500)}
.acp-toast--error .acp-toast__dot{background:var(--alert-500)}
.acp-toast__title{font:var(--weight-semibold) var(--text-sm)/1.4 var(--font-body);color:var(--text-heading)}
.acp-toast__msg{font:var(--weight-regular) var(--text-sm)/1.5 var(--font-body);color:var(--text-muted);margin-top:2px}

/* ---------- Tooltip ---------- */
.acp-tip{position:relative;display:inline-flex}
.acp-tip__bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--bordeaux-900);color:var(--rose-100);font:var(--weight-regular) var(--text-xs)/1.35 var(--font-body);padding:8px 12px;border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-soft)}
.acp-tip:hover .acp-tip__bubble,.acp-tip:focus-within .acp-tip__bubble{opacity:1}

@keyframes acp-fade{from{opacity:0}to{opacity:1}}
@keyframes acp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}