/*
 * Mash Networks — Design Tokens
 * colors_and_type.css
 * ─────────────────────────────────────────────────────────
 * Base + semantic CSS custom properties for all Mash designs.
 * Source: Brand Assets from Nick (April 2026)
 */

/* ─── FONTS ──────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('fonts/HelveticaNeueLT-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('fonts/HelveticaNeueLT-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Helvetica Neue LT';
  src: url('fonts/HelveticaNeueLT-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

/* ─── BASE COLOR PALETTE ─────────────────────────────────── */
:root {
  /* ── PRIMARY BRAND COLORS (exact) ── */
  --color-black:      #121212;   /* near-black — logo M, primary text */
  --color-red:        #934242;   /* muted burgundy — logo arc */
  --color-blue:       #568191;   /* steel blue — logo arc, UI accents */
  --color-light:      #EEEEEE;   /* light background / neutral */
  --color-green:      #408b6c;   /* sage green — logo arc */

  /* ── ADDITIONAL BRAND COLORS ── */
  --color-gray:       #ADADAD;   /* mid-gray UI */
  --color-red-light:  #B85353;   /* lighter red variant */
  --color-blue-vivid: #2484C2;   /* vivid blue — links, highlights */
  --color-blue-tint:  #D1EEFF;   /* pale blue tint — backgrounds */
  --color-green-tint: #CAEDE0;   /* pale green tint — backgrounds */

  /* ── ALERT COLORS ── */
  --color-success:    #00D077;   /* success / positive */
  --color-error:      #DC3C3C;   /* error / destructive */

  /* ── NEUTRALS ── */
  --color-white:      #FFFFFF;
  --color-gray-50:    #F8F8F8;
  --color-gray-100:   #EEEEEE;   /* = --color-light */
  --color-gray-200:   #D8D8D8;
  --color-gray-400:   #ADADAD;   /* = --color-gray */
  --color-gray-600:   #717171;
  --color-gray-800:   #333333;

  /* ── COLOR TINTS (for backgrounds / states) ── */
  --color-blue-10:    #EAF2F5;
  --color-blue-20:    #C8DDE4;
  --color-blue-50:    #8FB5C0;
  --color-green-10:   #E8F4EF;
  --color-green-20:   #CAEDE0;   /* = --color-green-tint */
  --color-green-50:   #7DBFA5;
  --color-red-10:     #F5EBEB;
  --color-red-20:     #DDB8B8;
  --color-red-50:     #C07878;
  --color-success-10: #E6FFF5;
  --color-error-10:   #FDEAEA;
}

/* ─── SEMANTIC TOKENS ────────────────────────────────────── */
:root {
  /* Text */
  --fg-primary:       var(--color-black);
  --fg-secondary:     var(--color-gray-600);
  --fg-muted:         var(--color-gray-400);
  --fg-inverted:      var(--color-white);
  --fg-accent-blue:   var(--color-blue);
  --fg-accent-green:  var(--color-green);
  --fg-accent-red:    var(--color-red);

  /* Backgrounds */
  --bg-base:          var(--color-white);
  --bg-subtle:        var(--color-gray-50);
  --bg-muted:         var(--color-gray-100);
  --bg-dark:          var(--color-black);
  --bg-blue:          var(--color-blue);
  --bg-green:         var(--color-green);
  --bg-red:           var(--color-red);

  /* Borders */
  --border-subtle:    var(--color-gray-200);
  --border-default:   var(--color-gray-400);
  --border-strong:    var(--color-black);

  /* Interactive */
  --color-interactive:       var(--color-blue);
  --color-interactive-hover: #486e7c;
  --color-interactive-press: #3a5a66;
  --color-cta:               var(--color-black);
  --color-cta-hover:         var(--color-gray-800);

  /* Status / alerts */
  --color-status-success:    var(--color-success);
  --color-status-error:      var(--color-error);
  --color-status-warning:    #E08A2A;
  --color-status-info:       var(--color-blue-vivid);
  --bg-success:              var(--color-success-10);
  --bg-error:                var(--color-error-10);
}

/* ─── FONT STACKS ────────────────────────────────────────── */
:root {
  --font-display:  'DM Serif Display', 'Georgia', serif;
  --font-sans:     'Montserrat', 'Helvetica Neue', 'Arial', sans-serif;
  --font-body:     'Helvetica Neue LT', 'Helvetica Neue', 'Arial', sans-serif;
  --font-mono:     'Courier New', monospace;
}

/* ─── TYPE SCALE ─────────────────────────────────────────── */
:root {
  /* Sizes */
  --text-xs:    0.6875rem;   /* 11px */
  --text-sm:    0.75rem;     /* 12px */
  --text-base:  0.875rem;    /* 14px */
  --text-md:    1rem;        /* 16px */
  --text-lg:    1.125rem;    /* 18px */
  --text-xl:    1.375rem;    /* 22px */
  --text-2xl:   1.75rem;     /* 28px */
  --text-3xl:   2.25rem;     /* 36px */
  --text-4xl:   3rem;        /* 48px */
  --text-5xl:   4rem;        /* 64px */

  /* 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: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-widest: 0.2em;
}

/* ─── SEMANTIC TYPE ROLES ────────────────────────────────── */
:root {
  /* Display — DM Serif, editorial */
  --type-display-font:     var(--font-display);
  --type-display-weight:   400;
  --type-display-tracking: var(--tracking-tight);
  --type-display-leading:  var(--leading-tight);

  /* Heading — Montserrat Bold, all-caps */
  --type-heading-font:     var(--font-sans);
  --type-heading-weight:   700;
  --type-heading-tracking: var(--tracking-wide);
  --type-heading-leading:  var(--leading-snug);
  --type-heading-transform: uppercase;

  /* Subheading — Montserrat SemiBold */
  --type-subheading-font:     var(--font-sans);
  --type-subheading-weight:   600;
  --type-subheading-tracking: var(--tracking-wide);
  --type-subheading-leading:  var(--leading-snug);

  /* Body — Helvetica Neue LT Roman */
  --type-body-font:     var(--font-body);
  --type-body-weight:   400;
  --type-body-tracking: var(--tracking-normal);
  --type-body-leading:  var(--leading-relaxed);

  /* Caption — Montserrat Medium small */
  --type-caption-font:     var(--font-sans);
  --type-caption-weight:   500;
  --type-caption-tracking: var(--tracking-wider);
  --type-caption-leading:  var(--leading-normal);
  --type-caption-transform: uppercase;
}

/* ─── SPACING SCALE ──────────────────────────────────────── */
:root {
  --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 ──────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}

/* ─── SHADOWS ────────────────────────────────────────────── */
:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.08);
}

/* ─── TRANSITIONS ────────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

/* ─── CONVENIENCE ELEMENT STYLES ────────────────────────── */
.mash-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.mash-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

.mash-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-primary);
}

.mash-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.mash-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mash-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}