/* ============================================================
   INSPIREWORX DESIGN SYSTEM — Colors & Typography
   colors_and_type.css
   ============================================================ */

/* ------- Web Fonts ------- */
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Italic-Variable.ttf') format('truetype');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* ------- Base Color Palette ------- */
:root {
  /* ── Brand Primaries ── */
  --iw-teal:         #008577;   /* Teal — Primary 1 */
  --iw-orange:       #ff6801;   /* Blaze Orange — Primary 2 */

  /* Teal scale */
  --iw-teal-900:  #003d36;
  --iw-teal-800:  #005549;
  --iw-teal-700:  #006157;   /* Blue Stone — supporting */
  --iw-teal-600:  #007568;
  --iw-teal-500:  #008577;   /* PRIMARY TEAL ★ */
  --iw-teal-400:  #00a691;
  --iw-teal-300:  #00ad99;   /* Persian Green — supporting */
  --iw-teal-200:  #5dc9bb;
  --iw-teal-100:  #aee4dc;
  --iw-teal-50:   #e0f5f2;

  /* Orange / Blaze scale */
  --iw-orange-900: #7a2e00;
  --iw-orange-800: #a83d00;
  --iw-orange-700: #d45200;
  --iw-orange-600: #f06000;
  --iw-orange-500: #ff6801;   /* BLAZE ORANGE ★ */
  --iw-orange-400: #ff8534;
  --iw-orange-300: #ffa366;
  --iw-orange-200: #ffc67a;   /* Macaroni & Cheese — warm accent */
  --iw-orange-100: #ffedb1;   /* Buttermilk — warm accent */
  --iw-orange-50:  #fff6eb;   /* Serenade — primary background */

  /* Warm accents (use sparingly) */
  --iw-yellow:     #ffae00;   /* Yellow Sea */
  --iw-macaroni:   #ffc67a;   /* Macaroni & Cheese */
  --iw-buttermilk: #ffedb1;   /* Buttermilk */
  --iw-serenade:   #fff6eb;   /* Serenade — primary bg */

  /* Supporting tones */
  --iw-blue-stone:     #006157;
  --iw-persian-green:  #00ad99;

  /* Neutrals */
  --iw-neutral-950: #0e0e0f;
  --iw-neutral-900: #1a1a1c;
  --iw-neutral-800: #2e2e32;
  --iw-neutral-700: #44444a;
  --iw-neutral-600: #5c5c63;
  --iw-neutral-500: #77777f;
  --iw-neutral-400: #9898a0;
  --iw-neutral-300: #b8b8bf;
  --iw-neutral-200: #d6d6da;
  --iw-neutral-100: #ebebed;
  --iw-neutral-50:  #f5f5f6;
  --iw-neutral-0:   #ffffff;

  /* ------- Semantic / Alias Tokens ------- */

  /* Backgrounds */
  --bg-page:        var(--iw-serenade);   /* #fff6eb — Serenade */
  --bg-white:       var(--iw-neutral-0);
  --bg-subtle:      var(--iw-buttermilk);
  --bg-teal:        var(--iw-teal);
  --bg-teal-dark:   var(--iw-teal-900);
  --bg-orange:      var(--iw-orange);
  --bg-card:        var(--iw-neutral-0);

  /* Foregrounds */
  --fg-primary:     var(--iw-neutral-900);
  --fg-secondary:   var(--iw-neutral-600);
  --fg-muted:       var(--iw-neutral-400);
  --fg-on-teal:     var(--iw-neutral-0);
  --fg-on-orange:   var(--iw-neutral-0);
  --fg-brand-teal:  var(--iw-teal);
  --fg-brand-orange:var(--iw-orange);

  /* Borders */
  --border-default: var(--iw-neutral-200);
  --border-subtle:  var(--iw-neutral-100);
  --border-teal:    var(--iw-teal-400);
  --border-orange:  var(--iw-orange-400);

  /* Interactive states */
  --focus-ring:     var(--iw-persian-green);
  --hover-teal:     var(--iw-teal-700);
  --hover-orange:   var(--iw-orange-700);
  --press-scale:    0.97;

  /* Feedback */
  --color-success:  #1f8c5c;
  --color-warning:  #c47f00;
  --color-error:    #c0392b;
  --color-info:     var(--iw-teal-600);

  /* ------- Typography Scale ------- */
  --font-sans:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'DM Mono', 'Fira Mono', 'Courier New', monospace;

  /* Base sizes */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.875rem;  /* 30px */
  --text-3xl:  2.25rem;   /* 36px */
  --text-4xl:  3rem;      /* 48px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  4.5rem;    /* 72px */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.1em;

  /* ------- Spacing Scale ------- */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ------- Border Radius ------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ------- Shadows ------- */
  --shadow-sm:  0 1px 2px 0 rgba(0,133,119,0.06);
  --shadow-md:  0 4px 12px 0 rgba(0,133,119,0.10);
  --shadow-lg:  0 8px 24px 0 rgba(0,133,119,0.14);
  --shadow-xl:  0 16px 40px 0 rgba(0,133,119,0.18);
  --shadow-orange-sm: 0 2px 8px 0 rgba(255,104,1,0.20);
  --shadow-orange-lg: 0 8px 24px 0 rgba(255,104,1,0.28);

  /* ------- Transitions ------- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:  120ms;
  --duration-base:  220ms;
  --duration-slow:  380ms;
}

/* ------- Semantic HTML Element Defaults ------- */
.iw, .iw * { box-sizing: border-box; }

.iw {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-page);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-optical-sizing: auto;
}

/* Display / Hero headings */
.iw h1, .iw .h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.iw h2, .iw .h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
.iw h3, .iw .h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.iw h4, .iw .h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.iw h5, .iw .h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.iw h6, .iw .h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}
.iw p {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--fg-secondary);
}
.iw .lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--fg-secondary);
}
.iw .label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.iw .caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--fg-muted);
}
.iw code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}
.iw strong { font-weight: var(--weight-bold); }
.iw em     { font-style: italic; }

/* ------- Utility tints ------- */
.iw .text-teal   { color: var(--fg-brand-teal); }
.iw .text-orange { color: var(--fg-brand-orange); }
.iw .text-muted  { color: var(--fg-muted); }

.iw .bg-teal-dark { background: var(--bg-teal-dark); color: var(--fg-on-teal); }
.iw .bg-teal      { background: var(--bg-teal); color: var(--fg-on-teal); }
.iw .bg-orange    { background: var(--bg-orange); color: var(--fg-on-orange); }
.iw .bg-subtle    { background: var(--bg-subtle); }