/* ============================================================
   DUOLAB — COLORS & TYPE
   Brand: Duolab Creative — hub criativo para marcas de roupa
   ============================================================ */

/* -------- FONTS -------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* The brand uses Poppins SemiBold heavily. We pull the rest of
   the Poppins family from Google Fonts for body weights. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* -------- BRAND COLORS --------------------------------- */
  /* Primary brand orange — sampled from the Duolab logo */
  --duo-orange:       #FF3E00;
  --duo-orange-700:   #D62F00;  /* hover / pressed */
  --duo-orange-300:   #FF7A4A;  /* tint */
  --duo-orange-100:   #FFE0D2;  /* wash */

  /* Black is a primary surface — bold, uppercase headlines on black are core */
  --duo-black:        #0A0A0A;
  --duo-ink:          #18130F;  /* warm-tinted black for body copy */
  --duo-charcoal:     #2A2622;

  /* Neutrals — warm off-whites pair with the orange */
  --duo-bone:         #F5F2EC;
  --duo-cream:        #FAF7F1;
  --duo-paper:        #FFFFFF;
  --duo-line:         #1A1714;   /* hairline on light surfaces */
  --duo-line-soft:    rgba(10,10,10,0.12);

  /* Accent — sparingly used, from instagram feed: a sun-baked yellow,
     and a denim-deep blue. Both appear in collection art / carousels. */
  --duo-yellow:       #F2D43A;
  --duo-blue:         #1E3A8A;
  --duo-grass:        #2E7D32;

  /* -------- SEMANTIC FOREGROUND / BACKGROUND ------------- */
  --fg-1:   var(--duo-ink);          /* default text on light */
  --fg-2:   #5C544E;                 /* secondary text */
  --fg-3:   #8C857F;                 /* tertiary / meta */
  --fg-inv: var(--duo-bone);         /* text on dark / orange surfaces */

  --bg-1:   var(--duo-cream);        /* default page */
  --bg-2:   var(--duo-bone);         /* recessed sections */
  --bg-3:   var(--duo-paper);        /* cards on bone */
  --bg-inv: var(--duo-black);        /* full-bleed dark sections */

  --accent:        var(--duo-orange);
  --accent-press:  var(--duo-orange-700);
  --on-accent:     var(--duo-paper);

  /* -------- TYPE TOKENS --------------------------------- */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* Display weights — SemiBold (600) is the brand's signature.
     Black (900) used only for the boldest hero stamps. */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* Type scale — designed for big bold headlines */
  --fs-display:  clamp(64px, 9vw, 144px);
  --fs-h1:       clamp(40px, 5.2vw, 80px);
  --fs-h2:       clamp(32px, 3.6vw, 56px);
  --fs-h3:       clamp(22px, 2.2vw, 32px);
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-xsmall:   12px;
  --fs-eyebrow:  11px;

  /* Line-heights */
  --lh-tight:  0.92;     /* hero stamps */
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-body:   1.5;

  /* Letter-spacing */
  --ls-tight:    -0.02em;
  --ls-display:  -0.01em;
  --ls-eyebrow:   0.18em;
  --ls-button:    0.04em;

  /* -------- SPACING ------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* -------- RADII --------------------------------------- */
  --r-0:   0px;       /* default: sharp corners on cards/sections */
  --r-1:   4px;
  --r-2:   8px;
  --r-pill: 999px;    /* CTA buttons are pills */

  /* -------- SHADOWS ------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.06);
  --shadow-md: 0 6px 18px rgba(10,10,10,0.08);
  --shadow-lg: 0 24px 48px -8px rgba(10,10,10,0.18);
  /* Orange-tinted glow for pressed CTAs */
  --shadow-orange: 0 12px 32px -8px rgba(255,62,0,0.45);

  /* -------- MOTION -------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 0.84, 0.30, 1.00);
  --ease-snap:   cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --d-fast:  140ms;
  --d-med:   240ms;
  --d-slow:  420ms;
}

/* -------- BASE -------------------------------------------- */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* -------- SEMANTIC TYPE STYLES (apply as classes) -------- */
.display, .duo-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.h1, .duo-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.h2, .duo-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}

.h3, .duo-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

.h4, .duo-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-h4);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Note: base `p` intentionally has NO color set — it inherits from its parent,
   so dark/orange surfaces don't need to override it. Use `.body` for an explicit ink color. */
p {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.body-lg { font-size: 18px; line-height: 1.55; }
.body-sm { font-size: var(--fs-small); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Italic emphasis — used in tagline "De dono para dono : )" */
.italic-tag {
  font-style: italic;
  font-weight: var(--w-medium);
}

/* -------- UTILITY: surfaces ------------------------------ */
.surface-orange { background: var(--duo-orange); color: var(--on-accent); }
.surface-black  { background: var(--duo-black);  color: var(--fg-inv); }
.surface-bone   { background: var(--duo-bone);   color: var(--fg-1); }
.surface-cream  { background: var(--duo-cream);  color: var(--fg-1); }