/* ============================================================
   SKIN THERAPY — Wireframe kit
   Low-fi sketch aesthetic · b&w + brand-color touches
   Hand-drawn but readable. Used inside design-canvas artboards.
   ============================================================ */

/* Brand typography — Cardo (serif display) + Helvetica Neue (sans body) */
@font-face { font-family:'Cardo'; src:url('fonts/Cardo-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Cardo'; src:url('fonts/Cardo-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Cardo'; src:url('fonts/Cardo-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueThin.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueLight.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueRoman.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueMedium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Helvetica Neue LT'; src:url('fonts/HelveticaNeueBold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  --wf-hand: 'Cardo', 'Times New Roman', Georgia, serif;          /* display / titles / hero */
  --wf-ui:   'Helvetica Neue LT', 'Helvetica Neue', Helvetica, Arial, sans-serif;  /* body / ui */

  --ink:     #2b2b2b;                     /* main sketch stroke */
  --ink-2:   #6b6b6b;                     /* secondary stroke / muted */
  --ink-3:   #9a9a9a;                     /* faint */
  --paper:   #ffffff;
  --paper-2: #faf8f5;                     /* off-white ground */
  --fill:    #ededed;                     /* grey block fill */
  --fill-2:  #f4f3f1;

  /* brand-color touches (so the colour-usage axis reads) */
  --o:       #ff6f33;                     /* orange vif */
  --o-soft:  #ffe6db;                     /* orange wash */
  --b:       #9fd4e2;                     /* bleu clair */
  --b-soft:  #e4f2f6;                     /* blue wash */
  --y:       #ffc727;
  --v-soft:  #ece7f6;
}

/* ---- base ---- */
.wf {
  font-family: var(--wf-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: 1.35;
  position: relative;
}
.wf * { box-sizing: border-box; }

/* ---- hand-drawn box: wobbly border-radius, ink stroke ---- */
.wf-box {
  border: 2px solid var(--ink);
  border-radius: 14px 220px 16px 240px / 240px 16px 220px 14px;
  background: var(--paper);
}
.wf-box--alt { border-radius: 220px 14px 240px 16px / 16px 240px 14px 220px; }
.wf-box--soft { border-color: var(--ink-2); }
.wf-rect { border: 2px solid var(--ink); border-radius: 4px; }
.wf-pill { border-radius: 999px; }

/* hand-drawn separators */
.wf-rule { height: 0; border: none; border-top: 2px solid var(--ink); border-radius: 2px; opacity: .85; }
.wf-rule--dash { border-top: 2px dashed var(--ink-2); }
.wf-rule--soft { border-top: 2px solid var(--ink-3); }

/* ---- type ---- */
.wf-display { font-family: var(--wf-hand); font-weight: 400; line-height: 1.0; letter-spacing: -0.01em; color: var(--ink); }
.wf-h { font-family: var(--wf-hand); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
.wf-logo { font-family: var(--wf-hand); font-weight: 400; letter-spacing: 0; }
.wf-eyebrow { font-family: var(--wf-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: var(--ink-2); }
.wf-cap { font-family: var(--wf-ui); font-size: 13px; color: var(--ink-2); }
.wf-tiny { font-family: var(--wf-ui); font-size: 11px; color: var(--ink-3); }

.wf-accent { color: var(--o); }

/* ---- text-line placeholders (grey bars = body copy) ---- */
.wf-lines { display: flex; flex-direction: column; gap: 9px; }
.wf-line { height: 9px; background: var(--fill); border-radius: 999px; width: 100%; }
.wf-line.s90 { width: 90%; } .wf-line.s80 { width: 80%; } .wf-line.s70 { width: 70%; }
.wf-line.s60 { width: 60%; } .wf-line.s50 { width: 50%; } .wf-line.s40 { width: 40%; }
.wf-line.dark { background: #dcdcdc; }

/* ---- photo placeholder: grey box with X + label ---- */
.wf-photo {
  position: relative;
  background: var(--fill);
  border: 2px solid var(--ink-2);
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(43,43,43,.16) calc(50% - 1px), rgba(43,43,43,.16) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left,  transparent calc(50% - 1px), rgba(43,43,43,.16) calc(50% - 1px), rgba(43,43,43,.16) calc(50% + 1px), transparent calc(50% + 1px));
}
.wf-photo .wf-photo-tag {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink-2);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--wf-ui);
  font-size: 12px;
  color: var(--ink-2);
  max-width: 80%;
  text-align: center;
  line-height: 1.2;
}
/* tinted photo variants for colour-block direction */
.wf-photo--blue { background-color: var(--b-soft); border-color: var(--b); }
.wf-photo--orange { background-color: var(--o-soft); border-color: var(--o); }

/* ---- buttons ---- */
.wf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--wf-ui); font-weight: 700; font-size: 14px;
  padding: 10px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
}
.wf-btn--accent { background: var(--o); border-color: var(--o); color: #fff; }
.wf-btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.wf-btn--sm { padding: 6px 14px; font-size: 12px; }

/* ---- chips / tags ---- */
.wf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wf-ui); font-size: 12px; font-weight: 400;
  padding: 4px 12px;
  border: 1.5px solid var(--ink-2);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--paper);
}
.wf-chip--accent { border-color: var(--o); color: var(--o); }
.wf-chip--fill { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- annotation callout (the "why") ---- */
.wf-note {
  font-family: var(--wf-ui);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  color: var(--o);
  line-height: 1.25;
  display: inline-flex; align-items: center; gap: 6px;
}
.wf-note--ink { color: var(--ink-2); }
.wf-note-arrow { font-size: 18px; }

/* ---- small round "add" / icon button (catalog) ---- */
.wf-circ {
  width: 34px; height: 34px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wf-ui); font-weight: 700; font-size: 18px; color: var(--ink);
  flex: 0 0 auto;
}
.wf-circ--accent { background: var(--o-soft); border-color: var(--o); color: var(--o); }

/* ---- star rating (reviews) ---- */
.wf-stars { letter-spacing: 2px; font-size: 14px; color: var(--o); font-family: var(--wf-ui); }

/* ---- nav links row ---- */
.wf-nav { display: flex; align-items: center; gap: 22px; font-family: var(--wf-ui); font-size: 14px; color: var(--ink); }
.wf-nav span { cursor: default; }

/* ---- petal mark stand-in (asterisk) ---- */
.wf-mark { color: var(--o); font-family: var(--wf-hand); font-weight: 700; }

/* ---- grid helpers ---- */
.wf-row { display: flex; }
.wf-col { display: flex; flex-direction: column; }

/* ---- colour-region grounds (direction C) ---- */
.wf-ground-paper  { background: var(--paper-2); }
.wf-ground-blue   { background: var(--b-soft); }
.wf-ground-orange { background: var(--o-soft); }
.wf-ground-ink    { background: var(--ink); color: #fff; }
.wf-ground-ink .wf-display, .wf-ground-ink .wf-h, .wf-ground-ink .wf-eyebrow,
.wf-ground-ink .wf-cap, .wf-ground-ink .wf-logo { color: #fff; }
.wf-ground-ink .wf-line { background: rgba(255,255,255,.22); }