/* ============================================================
   RE-MEDIA Design System — Colors & Typography
   Kitsap County, WA | Cinematic Real Estate Media
   ============================================================ */

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

/* ============================================================
   BRAND COLOR TOKENS
   ============================================================ */
:root {

  /* --- Forest Green (primary brand) --- */
  --green-950:  #141a12;
  --green-900:  #1e2a1b;
  --green-800:  #2a3a26;
  --green-700:  #374d32;
  --green-600:  #4a5c44;
  --green-500:  #64715f;   /* extracted logo background */
  --green-400:  #7e8e78;
  --green-300:  #9fac99;
  --green-200:  #c2cabe;
  --green-100:  #e4e8e1;
  --green-50:   #f2f4f1;

  /* --- Gold (primary accent) --- */
  --gold-900:   #3d2a08;
  --gold-800:   #6b4a10;
  --gold-700:   #8b6220;
  --gold-600:   #a87c30;
  --gold-500:   #c9a84c;   /* rich mid gold */
  --gold-400:   #dfc789;   /* logo MEDIA text */
  --gold-300:   #f0d89a;   /* logo highlight gold */
  --gold-200:   #f5e6bc;
  --gold-100:   #faf3e0;
  --gold-50:    #fdf9f0;

  /* --- Neutrals (warm near-black & cream) --- */
  --ink-950:    #0c0d0b;
  --ink-900:    #141512;
  --ink-800:    #1e2019;
  --ink-700:    #2e3028;
  --ink-600:    #454740;
  --ink-500:    #5e6059;
  --ink-400:    #7e8079;
  --ink-300:    #a2a49e;
  --ink-200:    #c8cac4;
  --ink-100:    #e6e7e3;
  --ink-50:     #f5f4f0;

  /* --- Cream / off-white --- */
  --cream:      #f5f0e6;
  --cream-warm: #ede6d5;
  --cream-cool: #f8f7f4;

  /* ============================================================
     SEMANTIC COLOR VARS
     ============================================================ */

  /* Backgrounds */
  --bg-primary:    var(--ink-950);     /* main dark bg */
  --bg-secondary:  var(--ink-900);     /* elevated surface */
  --bg-tertiary:   var(--ink-800);     /* card/panel bg */
  --bg-brand:      var(--green-500);   /* forest green logo bg */
  --bg-inverse:    var(--cream);       /* light mode */

  /* Foregrounds */
  --fg-primary:    var(--cream);
  --fg-secondary:  var(--ink-200);
  --fg-tertiary:   var(--ink-400);
  --fg-on-green:   var(--gold-300);
  --fg-on-dark:    var(--cream);

  /* Accent */
  --accent:        var(--gold-500);
  --accent-light:  var(--gold-300);
  --accent-muted:  var(--gold-700);
  --accent-hover:  var(--gold-400);

  /* Borders */
  --border-subtle: rgba(255,255,255,0.08);
  --border-gold:   rgba(201,168,76,0.35);
  --border-card:   rgba(255,255,255,0.05);

  /* Overlays */
  --overlay-dark:  rgba(12,13,11,0.72);
  --overlay-green: rgba(36,52,32,0.82);
  --overlay-gold:  rgba(201,168,76,0.12);

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

  /* Font Families */
  --font-display:  'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:     'Jost', system-ui, sans-serif;
  --font-label:    'Jost', system-ui, sans-serif;
  --font-italic:   'Cormorant Garamond', Georgia, serif;  /* italic variant for category labels */

  /* Font Sizes */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.8125rem;   /* 13px */
  --text-base:  1rem;        /* 16px */
  --text-md:    1.125rem;    /* 18px */
  --text-lg:    1.375rem;    /* 22px */
  --text-xl:    1.75rem;     /* 28px */
  --text-2xl:   2.25rem;     /* 36px */
  --text-3xl:   3rem;        /* 48px */
  --text-4xl:   4rem;        /* 64px */
  --text-5xl:   5.5rem;      /* 88px */

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

  /* Line Heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.2em;
  --tracking-ultra:   0.35em;

  /* ============================================================
     SPACING & LAYOUT TOKENS
     ============================================================ */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-pill:  999px;

  /* ============================================================
     SHADOWS & ELEVATION
     ============================================================ */
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.6);
  --shadow-xl:     0 24px 64px rgba(0,0,0,0.7);
  --shadow-gold:   0 0 24px rgba(201,168,76,0.2);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.06);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-base: 280ms; /* @kind other */
  --duration-slow: 480ms; /* @kind other */
}

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

/* Display / Hero */
.type-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* Section Heading */
h1, .type-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(--fg-primary);
}

h2, .type-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

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

h4, .type-h4 {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Category Label (italic serif — used on portfolio grid) */
.type-category {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--cream);
  letter-spacing: var(--tracking-normal);
}

/* Body */
p, .type-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

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

/* Label / UI */
.type-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Gold accent text */
.type-gold {
  color: var(--accent-light);
}

.type-gold-rich {
  color: var(--gold-500);
}