/* ============================================================
   RoseWave Studio — Design Tokens
   Color, type, spacing, radii, shadow, motion.
   Import this once at the top of any HTML file.
   ============================================================ */

/* --- Webfonts -------------------------------------------------
   Substituted from Google Fonts. See README "Caveats". */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Color tokens (raw) --------------------------------- */
  --ink:        #1A1410;
  --ink-90:    rgba(26,20,16,0.90);
  --ink-60:    rgba(26,20,16,0.60);
  --ink-40:    rgba(26,20,16,0.40);
  --ink-20:    rgba(26,20,16,0.20);
  --ink-10:    rgba(26,20,16,0.10);

  --bone:       #FAF6EE;   /* primary background — warm off-white */
  --paper:      #FFFCF5;   /* secondary surface — lightest neutral */
  --clay:       #ECE3D2;   /* hairlines, dividers */
  --clay-deep:  #D2C5AB;

  /* ----- Brand colors (provided) ---------------------------- */
  --coral:      #FF6B3D;   /* PRIMARY — the brand color */
  --coral-deep: #D44B20;   /* hover / press */
  --coral-soft: #FFD9CB;   /* tinted backgrounds */

  --sky:        #82C9FF;   /* secondary — cool counterpoint */
  --sky-deep:   #4A9FDB;
  --sky-soft:   #DDEFFF;

  --marigold:   #FFCE59;   /* secondary — warm highlight */
  --marigold-deep: #D9A52E;
  --marigold-soft: #FFEFC7;

  --lilac:      #E5B4FF;   /* secondary — dreamy */
  --lilac-deep: #B07FD9;
  --lilac-soft: #F4E2FF;

  --shadow:     #1A1410;

  /* ----- Color tokens (semantic) ---------------------------- */
  --fg-1: var(--ink);          /* primary text */
  --fg-2: var(--ink-60);       /* secondary text */
  --fg-3: var(--ink-40);       /* tertiary / placeholders */
  --fg-inverse: var(--bone);   /* text on dark surfaces */

  --bg-1: var(--bone);         /* default page bg */
  --bg-2: var(--paper);        /* card / raised surface */
  --bg-3: var(--clay);         /* lowest-contrast surface */
  --bg-inverse: var(--ink);    /* dark surfaces */

  --rule: var(--clay);         /* hairlines, table rows */
  --accent: var(--coral);
  --accent-deep: var(--coral-deep);
  --accent-soft: var(--coral-soft);

  /* ----- Type families -------------------------------------- */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* ----- Type scale (px-based fluid) ------------------------ */
  --t-eyebrow: 0.6875rem;   /* 11px */
  --t-caption: 0.75rem;     /* 12px */
  --t-small:   0.875rem;    /* 14px */
  --t-body:    1.0625rem;   /* 17px */
  --t-lead:    1.25rem;     /* 20px */
  --t-h6:      1rem;        /* 16px */
  --t-h5:      1.25rem;     /* 20px */
  --t-h4:      1.625rem;    /* 26px */
  --t-h3:      2.25rem;     /* 36px */
  --t-h2:      3.25rem;     /* 52px */
  --t-h1:      4.75rem;     /* 76px */
  --t-display: 7rem;        /* 112px */

  /* ----- Spacing (4px base) --------------------------------- */
  --s-0:  0;
  --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;
  --s-11: 160px;

  /* ----- Radii ---------------------------------------------- */
  --r-0:    0px;
  --r-1:    4px;
  --r-2:    8px;
  --r-pill: 999px;

  /* ----- Shadows -------------------------------------------- */
  --shadow-soft: 0 1px 2px rgba(26,20,16,0.04), 0 12px 32px -12px rgba(26,20,16,0.12);
  --shadow-hover: 0 1px 2px rgba(26,20,16,0.06), 0 18px 40px -14px rgba(26,20,16,0.18);

  /* ----- Motion --------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 480ms;

  /* ----- Layout --------------------------------------------- */
  --max-w: 1280px;
  --gutter: 32px;
}

/* ============================================================
   Semantic element styles — opt-in via class so this file
   never accidentally restyles host UIs.
   Use class="rw" on the root to apply.
   ============================================================ */

.rw {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

.rw h1, .rw .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--fg-1);
  margin: 0;
}
.rw h2, .rw .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0;
}
.rw h3, .rw .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0;
}
.rw h4, .rw .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
}
.rw h5, .rw .h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h5);
  line-height: 1.3;
  margin: 0;
}
.rw h6, .rw .h6 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h6);
  line-height: 1.4;
  margin: 0;
}

.rw p, .rw .p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}

.rw .lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 400;
  color: var(--fg-1);
}

.rw .quote {
  font-family: var(--font-serif);
  font-size: var(--t-h4);
  line-height: 1.3;
  font-style: italic;
  font-weight: 400;
  color: var(--fg-1);
}

.rw .eyebrow, .rw .label {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-2);
}

.rw .caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-2);
  letter-spacing: 0.01em;
}

.rw code, .rw .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
  border: 1px solid var(--rule);
}

.rw a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-40);
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
.rw a:hover {
  color: var(--coral);
  text-decoration-color: var(--coral);
}

.rw hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-7) 0;
}

/* ----- Buttons ---------------------------------------------- */

.rw .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
  text-decoration: none;
}
.rw .btn:active { transform: scale(0.98); }
.rw .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.rw .btn--primary {
  background: var(--coral);
  color: var(--bone);
}
.rw .btn--primary:hover { background: var(--coral-deep); }

.rw .btn--ink {
  background: var(--ink);
  color: var(--bone);
}
.rw .btn--ink:hover { background: #2A211B; }

.rw .btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--clay);
}
.rw .btn--secondary:hover { border-color: var(--ink); }

.rw .btn--ghost {
  background: transparent;
  color: var(--ink);
}
.rw .btn--ghost:hover { background: var(--clay); }

.rw .btn--sm { padding: 10px 16px; font-size: var(--t-caption); }

/* ----- Form inputs ------------------------------------------ */

.rw .field {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--fg-1);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--clay);
  padding: 12px 0;
  transition: border-color var(--dur-1) var(--ease);
}
.rw .field::placeholder { color: var(--fg-3); }
.rw .field:focus { outline: none; border-bottom-color: var(--ink); }

/* ----- Cards ------------------------------------------------ */

.rw .card {
  background: var(--bg-2);
  border-radius: var(--r-1);
  padding: var(--s-6);
}
.rw .card--photo {
  background: var(--bg-2);
  border-radius: var(--r-1);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.rw .card--photo:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ----- Tags ------------------------------------------------- */

.rw .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--clay);
  color: var(--fg-2);
}
.rw .tag--coral    { color: var(--coral-deep);    background: var(--coral-soft);    border-color: transparent; }
.rw .tag--sky      { color: var(--sky-deep);      background: var(--sky-soft);      border-color: transparent; }
.rw .tag--marigold { color: var(--marigold-deep); background: var(--marigold-soft); border-color: transparent; }
.rw .tag--lilac    { color: var(--lilac-deep);    background: var(--lilac-soft);    border-color: transparent; }

/* ----- Reduced motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}