/* ==============================================
   MILFORD MILLS TILE — DESIGN TOKENS
   Source of truth: Design and Layout Canon
   ============================================== */

:root {

  /* COLOR PALETTE - CANON */
  --charcoal:      #2B2B2B;
  --off-white:     #F5F5F3;
  --white:         #FFFFFF;
  --terracotta:    #A44A3F;
  --terracotta-h:  #8C3D34;
  --neutral:       #D8CFC4;
  --mid-gray:      #9A9490;
  --light-gray:    #E8E5E1;

  /* COLOR PALETTE - EXTENDED COMPONENT TOKENS */
  --body-copy:       #5C5855;
  --body-copy-muted: #7A7470;
  --footer-bg:       #1C1C1C;
  --charcoal-deep:   #3a3530;
  --warm-surface-94: rgba(244,242,238,0.94);
  --warm-surface-92: rgba(244,243,239,0.92);

  /* WHITE OPACITY SCALE */
  --white-03:  rgba(255,255,255,0.03);
  --white-04:  rgba(255,255,255,0.04);
  --white-06:  rgba(255,255,255,0.06);
  --white-08:  rgba(255,255,255,0.08);
  --white-10:  rgba(255,255,255,0.10);
  --white-16:  rgba(255,255,255,0.16);
  --white-32:  rgba(255,255,255,0.32);
  --white-35:  rgba(255,255,255,0.35);
  --white-38:  rgba(255,255,255,0.38);
  --white-40:  rgba(255,255,255,0.40);
  --white-45:  rgba(255,255,255,0.45);
  --white-50:  rgba(255,255,255,0.50);
  --white-60:  rgba(255,255,255,0.60);
  --white-65:  rgba(255,255,255,0.65);
  --white-70:  rgba(255,255,255,0.70);
  --white-72:  rgba(255,255,255,0.72);
  --white-80:  rgba(255,255,255,0.80);
  --white-85:  rgba(255,255,255,0.85);

  /* CHARCOAL OPACITY SCALE */
  --charcoal-96: rgba(43,43,43,0.96);
  --charcoal-82: rgba(43,43,43,0.82);
  --charcoal-78: rgba(43,43,43,0.78);
  --charcoal-74: rgba(43,43,43,0.74);
  --charcoal-70: rgba(43,43,43,0.70);
  --charcoal-35: rgba(43,43,43,0.35);

  /* DARK OVERLAY - hero gradient */
  --hero-overlay-82: rgba(28,28,28,0.82);
  --hero-overlay-65: rgba(28,28,28,0.65);
  --hero-overlay-30: rgba(28,28,28,0.30);
  --hero-overlay-10: rgba(28,28,28,0.10);
  --dark-82: rgba(10,10,10,0.82);
  --dark-55: rgba(10,10,10,0.55);
  --dark-25: rgba(10,10,10,0.25);

  /* TERRACOTTA OPACITY */
  --terracotta-50: rgba(164,74,63,0.5);

  /* TYPOGRAPHY */
  --font-heading: 'Libre Franklin', sans-serif;
  --font-body:    'Roboto', sans-serif;

  /* LAYOUT */
  --max-w:       1200px;
  --section-pad: 2.5rem 1.25rem; /* mobile-first: tighter vertical rhythm at mobile */

  /* MOTION */
  --transition: 0.25s ease;
  /* TRUST PLACEHOLDER GRADIENT TONES - remove when final image lands */
  --trust-ph-light: #c8bfb5;
  --trust-ph-dark:  #b0a494;

  /* DARK OVERLAY - portfolio label */
  --black-60: rgba(0,0,0,0.6);


}