/* ============================================================
   MAUSOLUTION — Core foundations: color + type
   Jakarta-based web & mobile app developer
   ============================================================ */

/* ---- Webfonts (Google Fonts CDN — see README for substitution note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============== BRAND CORE ============== */
  --brand-navy:   #0A1568;  /* primary — "MAU", left logo wordmark, deep brand */
  --brand-amber:  #FBB031;  /* secondary — "SOLUTION", warm energy */
  --brand-red:    #F01A1C;  /* accent — the overlap peak, used sparingly */

  /* ============== NAVY SCALE ============== */
  --navy-50:   #EEF0FA;
  --navy-100:  #D6DAF1;
  --navy-200:  #ADB4E0;
  --navy-300:  #7C86CB;
  --navy-400:  #4A56AE;
  --navy-500:  #28338C;
  --navy-600:  #0A1568;  /* brand-navy */
  --navy-700:  #081051;
  --navy-800:  #060B3A;
  --navy-900:  #040726;

  /* ============== AMBER SCALE ============== */
  --amber-50:   #FFF7E8;
  --amber-100:  #FEEBC4;
  --amber-200:  #FDD98A;
  --amber-300:  #FCC75A;
  --amber-400:  #FBB031;  /* brand-amber */
  --amber-500:  #E8970F;
  --amber-600:  #C27A05;
  --amber-700:  #945D06;

  /* ============== RED SCALE ============== */
  --red-50:    #FEECEC;
  --red-100:   #FCC9C9;
  --red-300:   #F66264;
  --red-500:   #F01A1C;  /* brand-red */
  --red-600:   #CE0D0F;
  --red-700:   #9E090B;

  /* ============== NEUTRALS (cool, navy-tinted) ============== */
  --white:    #FFFFFF;
  --gray-25:  #FAFBFD;
  --gray-50:  #F4F6FA;
  --gray-100: #E9ECF4;
  --gray-200: #D7DCE8;
  --gray-300: #BCC3D6;
  --gray-400: #939CB6;
  --gray-500: #6B7493;
  --gray-600: #4E5673;
  --gray-700: #383E55;
  --gray-800: #232839;
  --gray-900: #131726;
  --black:    #0B0E18;

  /* ============== SEMANTIC ============== */
  --fg-1: var(--navy-900);    /* primary text */
  --fg-2: var(--gray-600);    /* secondary text */
  --fg-3: var(--gray-400);    /* tertiary / captions */
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.66);

  --bg-1: var(--white);       /* base surface */
  --bg-2: var(--gray-50);     /* subtle raised / section */
  --bg-3: var(--gray-100);    /* sunken */
  --bg-dark:  var(--navy-600);    /* dark brand surface */
  --bg-darker: var(--navy-800);

  --border-1: var(--gray-200);
  --border-2: var(--gray-300);
  --border-strong: var(--navy-600);

  --accent:      var(--brand-amber);
  --accent-ink:  var(--navy-900);   /* text on amber */
  --link:        var(--navy-600);
  --focus-ring:  var(--brand-amber);

  --success: #1B9E5A;
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--navy-500);

  /* ============== TYPE FAMILIES ============== */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ============== TYPE SCALE (fluid-ish, px base) ============== */
  --text-display: 4.5rem;   /* 72 */
  --text-h1:   3.25rem;     /* 52 */
  --text-h2:   2.5rem;      /* 40 */
  --text-h3:   1.875rem;    /* 30 */
  --text-h4:   1.375rem;    /* 22 */
  --text-lg:   1.125rem;    /* 18 */
  --text-base: 1rem;        /* 16 */
  --text-sm:   0.875rem;    /* 14 */
  --text-xs:   0.75rem;     /* 12 */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.55;
  --leading-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;  /* eyebrows / labels */

  /* ============== RADII ============== */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ============== SPACING (4px base) ============== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ============== SHADOWS (cool navy-tinted) ============== */
  --shadow-xs: 0 1px 2px rgba(10,21,104,0.06);
  --shadow-sm: 0 2px 6px rgba(10,21,104,0.08);
  --shadow-md: 0 8px 24px rgba(10,21,104,0.10);
  --shadow-lg: 0 18px 48px rgba(10,21,104,0.14);
  --shadow-amber: 0 12px 30px rgba(251,176,49,0.40);

  /* ============== MOTION ============== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .ds-prose or utility use)
   ============================================================ */
.ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
.ds-display { font-size: var(--text-display); }
.ds-h1 { font-size: var(--text-h1); }
.ds-h2 { font-size: var(--text-h2); }
.ds-h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
.ds-h4 { font-size: var(--text-h4); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }

.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0;
}

.ds-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  margin: 0;
}
.ds-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}
.ds-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}