/* ============================================================
   Mulligan Funding — Color Tokens
   Source: MF Design System Figma file
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;600;700&family=Roboto+Mono:wght@500&display=swap');

:root {

  /* ── Brand: Tertiary / Teal (primary brand identity) ──────── */
  --color-tertiary:         #0E4455;
  --color-tertiary-dark:    #0B3644;
  --color-tertiary-darker:  #07222B;
  --color-tertiary-light:   #3E6977;
  --color-tertiary-lighter: #87A2AA;

  /* ── Brand: Primary / Orange ──────────────────────────────── */
  --color-primary:          #F37028;
  --color-primary-dark:     #C25A20;
  --color-primary-darker:   #7A3814;
  --color-primary-light:    #F58D53;
  --color-primary-lighter:  #F9B894;

  /* ── Brand: Secondary / Amber ─────────────────────────────── */
  --color-secondary:        #FCAF1A;
  --color-secondary-dark:   #CA8C15;
  --color-secondary-darker: #9A6B10;
  --color-secondary-light:  #FDBF48;
  --color-secondary-lighter:#FED78D;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --color-neutral-0:  #FFFFFF;
  --color-neutral-15: #F8F9FA;
  --color-neutral-25: #F3F6F7;
  --color-neutral-35: #EEF2F3;
  --color-neutral-50: #E7ECEE;
  --color-neutral-55: #CFD4D6;
  --color-neutral-60: #B8BCBE;
  --color-neutral-70: #8B8E8F;
  --color-neutral-80: #5C5E5F;
  --color-neutral-95: #171818;

  /* ── Status: Success ──────────────────────────────────────── */
  --color-success:       #4A825C;
  --color-success-dark:  #2C4E37;
  --color-success-light: #ECF2EE;

  /* ── Status: Warning ──────────────────────────────────────── */
  --color-warning:       #E98A15;
  --color-warning-dark:  #8C530D;
  --color-warning-light: #FCF3E7;

  /* ── Status: Error ────────────────────────────────────────── */
  --color-error:         #E3170A;
  --color-error-dark:    #880E06;
  --color-error-light:   #FCE7E6;

  /* ── Status: Info ─────────────────────────────────────────── */
  --color-info:          #4392F1;
  --color-info-dark:     #285891;
  --color-info-light:    #E7EFF8;

  /* ── Link ─────────────────────────────────────────────────── */
  --color-link:          #1D4ED8;
  --color-link-light:    #E7F1FD;

  /* ── Semantic aliases ─────────────────────────────────────── */
  --color-text-primary:     var(--color-tertiary);
  --color-text-body:        #1E1E1E;
  --color-text-muted:       #64748B;
  --color-text-disabled:    var(--color-neutral-60);
  --color-text-inverse:     var(--color-neutral-0);
  --color-text-error:       var(--color-error);
  --color-text-success:     var(--color-success);
  --color-text-warning:     var(--color-warning-dark);

  --color-bg-page:          var(--color-neutral-0);
  --color-bg-subtle:        var(--color-neutral-15);
  --color-bg-muted:         var(--color-neutral-25);
  --color-bg-header:        #F8FAFC;

  /* ── Dark backgrounds ─────────────────────────────────────── */
  /* Standard dark solid: Tertiary Darker */
  --color-bg-dark:          #07222B;
  /* Dark gradient: used for hero sections, nav bars, dark page headers.
     Runs from Tertiary Darker (#07222B) → Tertiary (#0E4455).
     Direction TBD — use 135deg (diagonal) or 180deg (top-to-bottom). */
  --color-bg-dark-gradient: linear-gradient(135deg, #07222B 0%, #0E4455 100%); /* @kind color */
  --color-bg-dark-gradient-h: linear-gradient(to right, #07222B 0%, #0E4455 100%); /* @kind color */

  --color-border:           var(--color-neutral-55);
  --color-border-light:     var(--color-neutral-50);
  --color-border-focus:     #8EA7EC;
  --color-border-error:     var(--color-error);

  --color-action-primary:       var(--color-tertiary);
  --color-action-primary-hover: var(--color-tertiary-dark);
  --color-action-secondary-text: var(--color-tertiary);
}
