/*
 * ECR Design System — Colors & Typography
 * Equitable Commercial Realty | Austin, Texas
 * ecrtx.com
 */

/* ─── FONT FACES ─────────────────────────────────────────────────────────── */

@font-face { font-family: 'MADECanvas'; font-weight: 400; src: url('fonts/MADECanvas-Regular.otf') format('opentype'); }
@font-face { font-family: 'MADECanvas'; font-weight: 900; src: url('fonts/MADECanvas-Black.otf') format('opentype'); }

@font-face { font-family: 'Montserrat'; font-weight: 300; src: url('fonts/Montserrat-Light.otf') format('opentype'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; src: url('fonts/Montserrat-Regular.otf') format('opentype'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; src: url('fonts/Montserrat-Medium.otf') format('opentype'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; src: url('fonts/Montserrat-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; src: url('fonts/Montserrat-Bold.otf') format('opentype'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; src: url('fonts/Montserrat-ExtraBold.otf') format('opentype'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; src: url('fonts/Montserrat-Black.otf') format('opentype'); }

@font-face { font-family: 'FreightText'; font-weight: 300; src: url('fonts/FreightText-Light.otf') format('opentype'); }
@font-face { font-family: 'FreightText'; font-weight: 400; src: url('fonts/FreightText-Book.otf') format('opentype'); }

/* ─── BASE COLOR TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Primary Palette */
  --ecr-charcoal:     #3F4443;
  --ecr-red:          #D6001C;
  --ecr-gray-mid:     #919D9D;
  --ecr-gray-light:   #BEC6C4;
  --ecr-white:        #FFFFFF;

  /* Secondary Palette */
  --ecr-orange:       #FF6720;
  --ecr-cream:        #EFEADE;
  --ecr-burgundy:     #651C32;

  /* Tints & Shades */
  --ecr-charcoal-90:  #535857;
  --ecr-charcoal-70:  #6b7170;
  --ecr-charcoal-20:  #d4d6d6;
  --ecr-charcoal-10:  #eaebeb;
  --ecr-red-80:       #de3347;
  --ecr-red-20:       #f7ccd1;
  --ecr-cream-80:     #f5f2ec;

  /* Functional */
  --ecr-bg:           var(--ecr-white);
  --ecr-bg-alt:       var(--ecr-cream);
  --ecr-bg-dark:      var(--ecr-charcoal);
  --ecr-fg1:          var(--ecr-charcoal);
  --ecr-fg2:          var(--ecr-charcoal-70);
  --ecr-fg3:          var(--ecr-gray-mid);
  --ecr-fg-inverse:   var(--ecr-white);
  --ecr-accent:       var(--ecr-red);
  --ecr-accent-alt:   var(--ecr-orange);
  --ecr-border:       var(--ecr-gray-light);
  --ecr-border-dark:  var(--ecr-charcoal-70);

  /* ─── TYPOGRAPHY TOKENS ───────────────────────────────────────────────── */

  --font-display:   'MADECanvas', serif;
  --font-heading:   'Montserrat', sans-serif;
  --font-body:      'FreightText', serif;
  --font-ui:        'Montserrat', sans-serif;

  --text-xs:    0.625rem;
  --text-sm:    0.75rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.5rem;
  --text-5xl:   5rem;
  --text-display: 7rem;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

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

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

  --shadow-sm:  0 1px 3px rgba(63,68,67,0.10), 0 1px 2px rgba(63,68,67,0.06);
  --shadow-md:  0 4px 12px rgba(63,68,67,0.12), 0 2px 4px rgba(63,68,67,0.06);
  --shadow-lg:  0 12px 32px rgba(63,68,67,0.14), 0 4px 8px rgba(63,68,67,0.08);
  --shadow-xl:  0 24px 48px rgba(63,68,67,0.18);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}

/* ─── SEMANTIC TYPE STYLES ───────────────────────────────────────────────── */

.ecr-display,
h1.ecr {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  color: var(--ecr-fg1);
}

.ecr-h1, h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-tight);
  color: var(--ecr-fg1);
}

.ecr-h2, h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--ecr-fg1);
}

.ecr-h3, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--ecr-fg1);
}

.ecr-h4, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-normal);
  color: var(--ecr-fg1);
}

.ecr-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-snug);
  color: var(--ecr-fg1);
}

.ecr-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-relaxed);
  color: var(--ecr-fg1);
}

.ecr-body-sm {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ecr-fg2);
}

.ecr-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-normal);
  color: var(--ecr-fg1);
}

.ecr-caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ecr-fg3);
}