/* ============================================================
   JBC Brands — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ============================================================
   BASE COLOR PALETTE
   ============================================================ */

:root {
  /* Warm neutrals */
  --color-cream:        #F5EEE6;
  --color-cream-deep:   #EDE3D8;
  --color-white:        #FDFAF7;
  --color-ink:          #1C1917;
  --color-ink-60:       rgba(28, 25, 23, 0.60);
  --color-ink-30:       rgba(28, 25, 23, 0.30);
  --color-ink-10:       rgba(28, 25, 23, 0.10);
  --color-ink-06:       rgba(28, 25, 23, 0.06);

  /* Brand accent palette */
  --color-blush-100:    #F9EDE6;
  --color-blush-200:    #F0D5C5;
  --color-blush-300:    #E5B9A3;
  --color-blush-400:    #D49A84;
  --color-blush-500:    #C47A6B;   /* primary rose */
  --color-blush-600:    #A85D52;
  --color-blush-700:    #7D3F38;

  --color-sand-100:     #F2EBE1;
  --color-sand-200:     #E3D5C3;
  --color-sand-300:     #D4BFA3;
  --color-sand-400:     #C9B49A;   /* primary sand */
  --color-sand-500:     #B09277;
  --color-sand-600:     #8C7159;

  --color-sage-100:     #EAF0E8;
  --color-sage-200:     #D0DECE;
  --color-sage-300:     #AECAAA;
  --color-sage-400:     #8FA888;   /* primary sage */
  --color-sage-500:     #6D8A65;
  --color-sage-600:     #4E6649;

  --color-gold-100:     #F5ECD8;
  --color-gold-200:     #E5D1A8;
  --color-gold-300:     #D2B474;
  --color-gold-400:     #B8944E;   /* primary gold */
  --color-gold-500:     #9A7838;
  --color-gold-600:     #755A26;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */

  --color-bg-base:      var(--color-cream);
  --color-bg-surface:   var(--color-white);
  --color-bg-subtle:    var(--color-cream-deep);
  --color-bg-dark:      var(--color-ink);

  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-ink-60);
  --color-text-muted:   var(--color-ink-30);
  --color-text-on-dark: var(--color-cream);

  --color-border:       var(--color-ink-10);
  --color-border-strong: var(--color-ink-30);

  --color-accent:       var(--color-blush-500);
  --color-accent-light: var(--color-blush-200);
  --color-accent-dark:  var(--color-blush-700);

  --color-premium:      var(--color-gold-400);
  --color-nature:       var(--color-sage-400);

  /* States */
  --color-success:      #5E9E6E;
  --color-success-bg:   #EAF3EC;
  --color-warning:      #C49A3C;
  --color-warning-bg:   #FBF3E0;
  --color-error:        #C4574A;
  --color-error-bg:     #FCECEA;
  --color-info:         #4A7FC4;
  --color-info-bg:      #EAF0FC;

  /* ============================================================
     TYPOGRAPHY — FONT FAMILIES
     ============================================================ */

  --font-display:   'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'DM Mono', 'Courier New', monospace;

  /* ============================================================
     TYPOGRAPHY — SCALE
     ============================================================ */

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    20px;
  --text-lg:    24px;
  --text-xl:    32px;
  --text-2xl:   40px;
  --text-3xl:   56px;
  --text-4xl:   72px;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ============================================================
     SPACING
     ============================================================ */

  --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;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */

  --radius-none:    0px;
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-full:    9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */

  --shadow-sm:    0 1px 3px rgba(28,25,23,0.08), 0 1px 2px rgba(28,25,23,0.06);
  --shadow-md:    0 1px 3px rgba(28,25,23,0.08), 0 4px 16px rgba(28,25,23,0.06);
  --shadow-lg:    0 4px 6px rgba(28,25,23,0.06), 0 12px 40px rgba(28,25,23,0.10);
  --shadow-xl:    0 8px 48px rgba(28,25,23,0.16);

  /* ============================================================
     ANIMATION
     ============================================================ */

  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  350ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.h3, h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.h4, h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.h5, h5 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.h6, h6 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

.label-caps {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}