/**
 * Pear — Velvet Room Design Tokens
 * Locked by Jonathan 2026-10-01. Exact hex values only.
 * Palette (five colours), type scale, 8pt spacing, radii/shadows, motion.
 */

/* ── Core palette (exact locked hex) ─────────────────────────────── */

:root {
  /* Ground & primary background */
  --color-green:        #1F3B2D;  /* Bottle green velvet – dark surface / primary ground */
  --color-oxblood:      #5C1A1B;  /* Deep accent, used rarely */
  --color-mustard:      #D1A23B;  /* Highlight / primary action */
  --color-blush:        #E8C4B8;  /* Soft accent / Partner B tone */
  --color-cream:        #F6EFE3;  /* Light neutral / text-on-dark */

  /* Derived light surfaces (green + cream tints) */
  --color-surface-darker:   #1F3B2D;  /* Same as green – deepest layer */
  --color-surface-dark:     #2C4A38;  /* Green tinted up ~20% with cream */
  --color-surface:          #385A44;  /* Mid-layer surface */
  --color-surface-light:    #E8C4B8;  /* Blush – soft surface */

  /* Two-ness: Partner A = green, Partner B = blush */
  --color-partner-a:        #1F3B2D;
  --color-partner-b:        #E8C4B8;

  /* Semantic role aliases */
  --color-bg-primary:       #1F3B2D;
  --color-bg-secondary:     #2C4A38;
  --color-accent:           #D1A23B;
  --color-text-primary:     #F6EFE3;
  --color-text-secondary:   rgba(246, 239, 227, 0.7);

  /* Text colour when bg is blush/cream */
  --color-text-on-light:    #1F3B2D;
}

/* ── Typography ──────────────────────────────────────────────────── */

:root {
  /* Headings – Reckless Neue → Instrument Serif fallback */
  --font-heading: 'Reckless Neue', 'Instrument Serif', serif;

  /* Body – ABC Diatype → Hanken Grotesk fallback */
  --font-body: 'ABC Diatype', 'Hanken Grotesk', sans-serif;

  /* Accents / pull quotes – Gambetta Italic → Instrument Serif Italic */
  --font-accent: 'Gambetta Italic', 'Instrument Serif Italic', serif;

  /* Type scale */
  --type-scale-ratio:     1.25;         /* Major third */

  /* Body size range */
  --type-body-size:       17px;         /* Middle of 16–18px band */
  --type-body-lh:         1.65;         /* Middle of 1.6–1.7 */
  --type-body-measure:    60ch;         /* Max readable measure */

  /* Fluid headline sizes (clamp-based, responsive) */
  --type-h1-size:         clamp(2rem, 5vw + 0.5rem, 3.5rem);
  --type-h2-size:         clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
  --type-h3-size:         clamp(1.25rem, 2vw + 0.5rem, 1.75rem);

  /* Body sizes */
  --type-body-default:    1rem;         /* 16px base on 16px viewport */
  --type-body-lg:         1.125rem;     /* 18px */
  --type-body-sm:         0.875rem;     /* 14px captions */

  /* Letter-spacing tweaks */
  --type-tracking-wide:   0.05em;
  --type-tracking-wider:  0.1em;
}

/* Apply font families to elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.25;
  letter-spacing: var(--type-tracking-wide);
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  max-width: var(--type-body-measure);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pull quotes / agent copy */
.agent-copy, blockquote, em.pull-quote {
  font-family: var(--font-accent);
  line-height: 1.5;
}

/* ── Spacing (8pt grid) ──────────────────────────────────────────── */

:root {
  --space-1:   0.25rem;  /* 4px   */
  --space-2:   0.5rem;   /* 8px   */
  --space-3:   0.75rem;  /* 12px  */
  --space-4:   1rem;     /* 16px  */
  --space-5:   1.25rem;  /* 20px  */
  --space-6:   1.5rem;   /* 24px  */
  --space-8:   2rem;     /* 32px  */
  --space-10:  2.5rem;   /* 40px  */
  --space-12:  3rem;     /* 48px  */
  --space-16:  4rem;     /* 64px  */
  --space-20:  5rem;     /* 80px  */
  --space-24:  6rem;     /* 96px  */
  --space-32:  8rem;     /* 128px */
}

/* Generous page padding utility */
.page-padding {
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

@media (max-width: 600px) {
  .page-padding {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ── Radius & Shadow (fabric-swatch cards) ───────────────────────── */

:root {
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-full:  9999px;

  /* Faint shadow — no hard borders, just gentle lift */
  --shadow-card:  0 4px 16px rgba(31, 59, 45, 0.12),
                  0 1px 4px rgba(31, 59, 45, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(31, 59, 45, 0.18),
                       0 2px 8px rgba(31, 59, 45, 0.10);
  --shadow-deep:  0 12px 40px rgba(31, 59, 45, 0.20),
                  0 4px 12px rgba(31, 59, 45, 0.12);
}

/* Fabric swatch card class */
.swatch-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: none;           /* No hard borders per spec */
  transition: box-shadow 300ms ease;
}
.swatch-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ── Motion (slow eases, 300-400ms) ──────────────────────────────── */

:root {
  --ease-slow: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-slow: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    300ms;
  --dur-medium:  350ms;
  --dur-slow:    400ms;
}

/* Global slow-transition default for interactive elements */
button, [role="button"], input, select, textarea {
  transition: background-color var(--dur-fast) var(--ease-slow),
              color var(--dur-fast) var(--ease-slow),
              box-shadow var(--dur-fast) var(--ease-slow),
              transform var(--dur-fast) var(--ease-slow);
}

/* ── Specimen display classes (for mood board token strip) ────────── */

.token-sample { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.token-swatch { width: 48px; height: 48px; border-radius: var(--radius-md); position: relative; }
.token-swatch::after { content: attr(data-label); position: absolute; bottom: -18px; left: 0; font-size: 10px; color: inherit; opacity: 0.6; white-space: nowrap; }
.token-value { font-family: monospace; font-size: 11px; opacity: 0.7; margin-bottom: 24px; }