@import 'tailwindcss';
@plugin "@tailwindcss/typography";

/* Specify new namespaced colors. */
@theme {
  --color-flexoki-black:       #100F0F;
  --color-flexoki-paper:       #FFFCF0;
  --color-flexoki-base-50:     #F2F0E5;
  --color-flexoki-base-100:    #E6E4D9;
  --color-flexoki-base-150:    #DAD8CE;
  --color-flexoki-base-200:    #CECDC3;
  --color-flexoki-base-300:    #B7B5AC;
  --color-flexoki-base-400:    #9F9D96;
  --color-flexoki-base-500:    #878580;
  --color-flexoki-base-600:    #6F6E69;
  --color-flexoki-base-700:    #575653;
  --color-flexoki-base-800:    #403E3C;
  --color-flexoki-base-850:    #343331;
  --color-flexoki-base-900:    #282726;
  --color-flexoki-base-950:    #1C1B1A;
  --color-flexoki-red-50:      #FFE1D5;
  --color-flexoki-red-100:     #FFCABB;
  --color-flexoki-red-150:     #FDB2A2;
  --color-flexoki-red-200:     #F89A8A;
  --color-flexoki-red-300:     #E8705F;
  --color-flexoki-red-400:     #D14D41;
  --color-flexoki-red-500:     #C03E35;
  --color-flexoki-red-600:     #AF3029;
  --color-flexoki-red-700:     #942822;
  --color-flexoki-red-800:     #6C201C;
  --color-flexoki-red-850:     #551B18;
  --color-flexoki-red-900:     #3E1715;
  --color-flexoki-red-950:     #261312;
  --color-flexoki-orange-50:   #FFE7CE;
  --color-flexoki-orange-100:  #FED3AF;
  --color-flexoki-orange-150:  #FCC192;
  --color-flexoki-orange-200:  #F9AE77;
  --color-flexoki-orange-300:  #EC8B49;
  --color-flexoki-orange-400:  #DA702C;
  --color-flexoki-orange-500:  #CB6120;
  --color-flexoki-orange-600:  #BC5215;
  --color-flexoki-orange-700:  #9D4310;
  --color-flexoki-orange-800:  #71320D;
  --color-flexoki-orange-850:  #59290D;
  --color-flexoki-orange-900:  #40200D;
  --color-flexoki-orange-950:  #27180E;
  --color-flexoki-yellow-50:   #FAEEC6;
  --color-flexoki-yellow-100:  #F6E2A0;
  --color-flexoki-yellow-150:  #F1D67E;
  --color-flexoki-yellow-200:  #ECCB60;
  --color-flexoki-yellow-300:  #DFB431;
  --color-flexoki-yellow-400:  #D0A215;
  --color-flexoki-yellow-500:  #BE9207;
  --color-flexoki-yellow-600:  #AD8301;
  --color-flexoki-yellow-700:  #8E6B01;
  --color-flexoki-yellow-800:  #664D01;
  --color-flexoki-yellow-850:  #503D02;
  --color-flexoki-yellow-900:  #3A2D04;
  --color-flexoki-yellow-950:  #241E08;
  --color-flexoki-green-50:    #EDEECF;
  --color-flexoki-green-100:   #DDE2B2;
  --color-flexoki-green-150:   #CDD597;
  --color-flexoki-green-200:   #BEC97E;
  --color-flexoki-green-300:   #A0AF54;
  --color-flexoki-green-400:   #879A39;
  --color-flexoki-green-500:   #768D21;
  --color-flexoki-green-600:   #66800B;
  --color-flexoki-green-700:   #536907;
  --color-flexoki-green-800:   #3D4C07;
  --color-flexoki-green-850:   #313D07;
  --color-flexoki-green-900:   #252D09;
  --color-flexoki-green-950:   #1A1E0C;
  --color-flexoki-cyan-50:     #DDF1E4;
  --color-flexoki-cyan-100:    #BFE8D9;
  --color-flexoki-cyan-150:    #A2DECE;
  --color-flexoki-cyan-200:    #87D3C3;
  --color-flexoki-cyan-300:    #5ABDAC;
  --color-flexoki-cyan-400:    #3AA99F;
  --color-flexoki-cyan-500:    #2F968D;
  --color-flexoki-cyan-600:    #24837B;
  --color-flexoki-cyan-700:    #1C6C66;
  --color-flexoki-cyan-800:    #164F4A;
  --color-flexoki-cyan-850:    #143F3C;
  --color-flexoki-cyan-900:    #122F2C;
  --color-flexoki-cyan-950:    #101F1D;
  --color-flexoki-blue-50:     #E1ECEB;
  --color-flexoki-blue-100:    #C6DDE8;
  --color-flexoki-blue-150:    #ABCFE2;
  --color-flexoki-blue-200:    #92BFDB;
  --color-flexoki-blue-300:    #66A0C8;
  --color-flexoki-blue-400:    #4385BE;
  --color-flexoki-blue-500:    #3171B2;
  --color-flexoki-blue-600:    #205EA6;
  --color-flexoki-blue-700:    #1A4F8C;
  --color-flexoki-blue-800:    #163B66;
  --color-flexoki-blue-850:    #133051;
  --color-flexoki-blue-900:    #12253B;
  --color-flexoki-blue-950:    #101A24;
  --color-flexoki-purple-50:   #F0EAEC;
  --color-flexoki-purple-100:  #E2D9E9;
  --color-flexoki-purple-150:  #D3CAE6;
  --color-flexoki-purple-200:  #C4B9E0;
  --color-flexoki-purple-300:  #A699D0;
  --color-flexoki-purple-400:  #8B7EC8;
  --color-flexoki-purple-500:  #735EB5;
  --color-flexoki-purple-600:  #5E409D;
  --color-flexoki-purple-700:  #4F3685;
  --color-flexoki-purple-800:  #3C2A62;
  --color-flexoki-purple-850:  #31234E;
  --color-flexoki-purple-900:  #261C39;
  --color-flexoki-purple-950:  #1A1623;
  --color-flexoki-magenta-50:  #FEE4E5;
  --color-flexoki-magenta-100: #FCCFDA;
  --color-flexoki-magenta-150: #F9B9CF;
  --color-flexoki-magenta-200: #F4A4C2;
  --color-flexoki-magenta-300: #E47DA8;
  --color-flexoki-magenta-400: #CE5D97;
  --color-flexoki-magenta-500: #B74583;
  --color-flexoki-magenta-600: #A02F6F;
  --color-flexoki-magenta-700: #87285E;
  --color-flexoki-magenta-800: #641F46;
  --color-flexoki-magenta-850: #4F1B39;
  --color-flexoki-magenta-900: #39172B;
  --color-flexoki-magenta-950: #24131D;
}

/* Define some semantic aliases. */
@theme inline {
  --color-flexoki-light-bg:    var(--color-flexoki-paper);
  --color-flexoki-light-bg-2:  var(--color-flexoki-base-50);
  --color-flexoki-light-tx:    var(--color-flexoki-black);
  --color-flexoki-light-tx-2:  var(--color-flexoki-base-600);
  --color-flexoki-light-tx-3:  var(--color-flexoki-base-300);
  --color-flexoki-light-ui:    var(--color-flexoki-base-100);
  --color-flexoki-light-ui-2:  var(--color-flexoki-base-150);
  --color-flexoki-light-ui-3:  var(--color-flexoki-base-200);
  --color-flexoki-dark-bg:     var(--color-flexoki-black);
  --color-flexoki-dark-bg-2:   var(--color-flexoki-base-950);
  --color-flexoki-dark-tx:     var(--color-flexoki-base-200);
  --color-flexoki-dark-tx-2:   var(--color-flexoki-base-500);
  --color-flexoki-dark-tx-3:   var(--color-flexoki-base-700);
  --color-flexoki-dark-ui:     var(--color-flexoki-base-900);
  --color-flexoki-dark-ui-2:   var(--color-flexoki-base-850);
  --color-flexoki-dark-ui-3:   var(--color-flexoki-base-800);
  --color-flexoki-light-re:    var(--color-flexoki-red-600);
  --color-flexoki-light-or:    var(--color-flexoki-orange-600);
  --color-flexoki-light-ye:    var(--color-flexoki-yellow-600);
  --color-flexoki-light-gr:    var(--color-flexoki-green-600);
  --color-flexoki-light-cy:    var(--color-flexoki-cyan-600);
  --color-flexoki-light-bl:    var(--color-flexoki-blue-600);
  --color-flexoki-light-pu:    var(--color-flexoki-purple-600);
  --color-flexoki-light-ma:    var(--color-flexoki-magenta-600);
  --color-flexoki-dark-re:     var(--color-flexoki-red-400);
  --color-flexoki-dark-or:     var(--color-flexoki-orange-400);
  --color-flexoki-dark-ye:     var(--color-flexoki-yellow-400);
  --color-flexoki-dark-gr:     var(--color-flexoki-green-400);
  --color-flexoki-dark-cy:     var(--color-flexoki-cyan-400);
  --color-flexoki-dark-bl:     var(--color-flexoki-blue-400);
  --color-flexoki-dark-pu:     var(--color-flexoki-purple-400);
  --color-flexoki-dark-ma:     var(--color-flexoki-magenta-400);
  --color-flexoki-light-re-2:  var(--color-flexoki-red-400);
  --color-flexoki-light-or-2:  var(--color-flexoki-orange-400);
  --color-flexoki-light-ye-2:  var(--color-flexoki-yellow-400);
  --color-flexoki-light-gr-2:  var(--color-flexoki-green-400);
  --color-flexoki-light-cy-2:  var(--color-flexoki-cyan-400);
  --color-flexoki-light-bl-2:  var(--color-flexoki-blue-400);
  --color-flexoki-light-pu-2:  var(--color-flexoki-purple-400);
  --color-flexoki-light-ma-2:  var(--color-flexoki-magenta-400);
  --color-flexoki-dark-re-2:   var(--color-flexoki-red-600);
  --color-flexoki-dark-or-2:   var(--color-flexoki-orange-600);
  --color-flexoki-dark-ye-2:   var(--color-flexoki-yellow-600);
  --color-flexoki-dark-gr-2:   var(--color-flexoki-green-600);
  --color-flexoki-dark-cy-2:   var(--color-flexoki-cyan-600);
  --color-flexoki-dark-bl-2:   var(--color-flexoki-blue-600);
  --color-flexoki-dark-pu-2:   var(--color-flexoki-purple-600);
  --color-flexoki-dark-ma-2:   var(--color-flexoki-magenta-600);
}

@layer base {
  html {
    @apply bg-flexoki-paper;
  }
}