/* ============================================================
   Jenni Rose Photography — Design Tokens
   colors_and_type.css
   ============================================================ */

/* Self-hosted brand fonts */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-VariableFont_wdth%2Cwght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-VariableFont_wdth%2Cwght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic-VariableFont_wdth%2Cwght.ttf') format('truetype-variations'),
       url('fonts/IBMPlexSans-Italic-VariableFont_wdth%2Cwght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}

/* Google Fonts (Tenor Sans — not yet uploaded as brand files) */
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');

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

:root {

  /* --- Coral Scale --- */
  --color-coral-50:  #FDF2EE;
  --color-coral-100: #FAE0D6;
  --color-coral-200: #F4BDAB;
  --color-coral-300: #EB9880;
  --color-coral-400: #E07A5F;
  --color-coral-500: #D4614A;  /* Brand primary */
  --color-coral-600: #B8503B;
  --color-coral-700: #93402F;
  --color-coral-800: #6E3224;
  --color-coral-900: #4A2118;

  /* --- Sage Scale --- */
  --color-sage-50:  #F2F5F0;
  --color-sage-100: #DDE8D9;
  --color-sage-200: #BACFB4;
  --color-sage-300: #97B690;
  --color-sage-400: #799D72;
  --color-sage-500: #5E8458;  /* Brand secondary */
  --color-sage-600: #4D6E48;
  --color-sage-700: #3D5739;
  --color-sage-800: #2D402A;
  --color-sage-900: #1C281B;

  /* --- Neutral / Warm White Scale --- */
  --color-neutral-0:   #FDFAF7;  /* Primary background */
  --color-neutral-50:  #F7F0E8;  /* Secondary background / cream */
  --color-neutral-100: #EDE3D7;
  --color-neutral-200: #DDD0C0;
  --color-neutral-300: #C4B09A;
  --color-neutral-400: #A89078;
  --color-neutral-500: #8C7260;
  --color-neutral-600: #6E5848;
  --color-neutral-700: #4F3E32;
  --color-neutral-800: #342820;  /* Primary text */
  --color-neutral-900: #1E1610;

  /* --- Blush Accent --- */
  --color-blush-50:  #FDF5F2;
  --color-blush-100: #F9E4DC;
  --color-blush-200: #F0C8B8;
  --color-blush-300: #E5A992;
  --color-blush-400: #D8896C;

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

  /* Backgrounds */
  --bg-primary:         var(--color-neutral-0);
  --bg-secondary:       var(--color-neutral-50);
  --bg-dark:            #2C2420;
  --bg-coral-tint:      var(--color-coral-50);
  --bg-sage-tint:       var(--color-sage-50);

  /* Text */
  --text-primary:       var(--color-neutral-800);
  --text-secondary:     var(--color-neutral-600);
  --text-tertiary:      var(--color-neutral-400);
  --text-on-dark:       var(--color-neutral-0);
  --text-coral:         var(--color-coral-500);
  --text-sage:          var(--color-sage-500);

  /* Brand actions */
  --brand-primary:      var(--color-coral-500);
  --brand-primary-hover:var(--color-coral-600);
  --brand-primary-press:var(--color-coral-700);
  --brand-secondary:    var(--color-sage-500);
  --brand-secondary-hover: var(--color-sage-600);

  /* Borders & Dividers */
  --border-subtle:      var(--color-neutral-200);
  --border-medium:      var(--color-neutral-300);
  --border-sage:        var(--color-sage-200);
  --border-coral:       var(--color-coral-200);

  /* States */
  --state-focus:        var(--color-coral-400);
  --state-error:        #C9493C;
  --state-success:      var(--color-sage-500);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font Families */
  --font-display:   'Cormorant Garamond', 'Georgia', serif;
  --font-wordmark:  'Tenor Sans', 'IBM Plex Sans', 'Georgia', sans-serif;
  --font-body:      'DM Sans', 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --font-mono:      'Courier New', monospace;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Type Scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    21px;
  --text-xl:    26px;
  --text-2xl:   32px;
  --text-3xl:   42px;
  --text-4xl:   54px;
  --text-5xl:   64px;
  --text-6xl:   80px;

  /* Line Heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.9;

  /* Letter Spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.18em;

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

  --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-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;
  --radius-none: 0px;

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

  --shadow-0: none;
  --shadow-1: 0 2px 8px rgba(60, 40, 30, 0.06);
  --shadow-2: 0 8px 32px rgba(60, 40, 30, 0.10);
  --shadow-3: 0 24px 64px rgba(60, 40, 30, 0.14);
  --shadow-inset: inset 0 1px 3px rgba(60, 40, 30, 0.08);

  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0.0, 1, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;

  /* ============================================================
     LAYOUT
     ============================================================ */

  --max-width:       1200px;
  --max-width-prose: 680px;
  --nav-height:      72px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

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

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-tertiary);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-coral);
}

blockquote, .pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

a {
  color: var(--text-coral);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
  color: var(--brand-primary-hover);
}

code, .code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}