/* Color Theme */
:root {
  /* Light Base */
  /* color */
  --accent-amber-100: #e2874920;
  --accent-amber-200: #e2874954;
  --accent-amber-300: #d26e29;
  --accent-amber-400: #c1560a;
  --accent-amber-500: #b0500a;
  --accent-amber-600: #f39f68;
  --accent-blue-100: #42a5eb20;
  --accent-blue-200: #42a5eb54;
  --accent-blue-300: #278de5;
  --accent-blue-400: #0c75de;
  --accent-blue-500: #0d69d6;
  --accent-blue-600: #5dbdf2;
  --accent-brown-100: #db8d3420;
  --accent-brown-200: #db8d3454;
  --accent-brown-300: #c4791f;
  --accent-brown-400: #ae6409;
  --accent-brown-500: #9f5d09;
  --accent-brown-600: #f1a24a;
  --accent-green-100: #0db75520;
  --accent-green-200: #0db75554;
  --accent-green-300: #0a9f4e;
  --accent-green-400: #078847;
  --accent-green-500: #077d45;
  --accent-green-600: #10ce5c;
  --accent-indigo-100: #8c95f820;
  --accent-indigo-200: #8c95f854;
  --accent-indigo-300: #777cf7;
  --accent-indigo-400: #6262f7;
  --accent-indigo-500: #5c51f4;
  --accent-indigo-600: #a1aff8;
  --accent-pink-100: #f266a420;
  --accent-pink-200: #f266a454;
  --accent-pink-300: #ec397c;
  --accent-pink-400: #e70c55;
  --accent-pink-500: #d60d43;
  --accent-pink-600: #f793cb;
  --accent-purple-100: #c37bf720;
  --accent-purple-200: #c37bf754;
  --accent-purple-300: #ba54f5;
  --accent-purple-400: #b22ef4;
  --accent-purple-500: #a923dd;
  --accent-purple-600: #cba1f8;
  --accent-red-100: #f2706720;
  --accent-red-200: #f2706754;
  --accent-red-300: #ed4539;
  --accent-red-400: #e81b0c;
  --accent-red-500: #d51a0d;
  --accent-red-600: #f79a94;
  --accent-teal-100: #0db1af20;
  --accent-teal-200: #0db1af54;
  --accent-teal-300: #0a999e;
  --accent-teal-400: #07828d;
  --accent-teal-500: #087786;
  --accent-teal-600: #10c8c0;
  --accent-violet-100: #a78cf720;
  --accent-violet-200: #a78cf754;
  --accent-violet-300: #986ff7;
  --accent-violet-400: #8952f6;
  --accent-violet-500: #843def;
  --accent-violet-600: #b6a9f8;
  --alt-base-100: #0000000a;
  --alt-base-200: #00000014;
  --alt-base-300: #00000029;
  --alt-base-400: #0000003d;
  --alt-base-500: #00000052;
  --alt-base-600: #00000070;
  --alt-contrast-100: #ffffff0a;
  --alt-contrast-200: #ffffff14;
  --alt-contrast-300: #ffffff1f;
  --alt-contrast-400: #ffffff29;
  --alt-contrast-500: #ffffff3d;
  --alt-contrast-600: #ffffff52;
  --danger-100: var(--accent-red-100);
  --danger-200: var(--accent-red-200);
  --danger-300: var(--accent-red-300);
  --danger-400: var(--accent-red-400);
  --danger-500: var(--accent-red-500);
  --danger-600: var(--accent-red-600);
  --fill-base-100: #ffffff;
  --fill-base-200: #fafafa;
  --fill-base-300: #f5f5f5;
  --fill-base-400: #f0f0f0;
  --fill-base-500: #ebebeb;
  --fill-base-600: #e0e0e0;
  --fill-contrast-100: #3d3d3d;
  --fill-contrast-200: #383838;
  --fill-contrast-300: #333333;
  --fill-contrast-400: #2e2e2e;
  --fill-contrast-500: #292929;
  --fill-contrast-600: #242424;
  --info-100: var(--accent-teal-100);
  --info-200: var(--accent-teal-200);
  --info-300: var(--accent-teal-300);
  --info-400: var(--accent-teal-400);
  --info-500: var(--accent-teal-500);
  --info-600: var(--accent-teal-600);
  --primary-100: var(--accent-pink-100);
  --primary-200: var(--accent-pink-200);
  --primary-300: var(--accent-pink-300);
  --primary-400: var(--accent-pink-400);
  --primary-500: var(--accent-pink-500);
  --primary-600: var(--accent-pink-600);
  --stroke-base-100: #ededed;
  --stroke-base-200: #e0e0e0;
  --stroke-base-300: #d9d9d9;
  --stroke-base-400: #cccccc;
  --stroke-base-500: #b3b3b3;
  --stroke-base-600: #8a8a8a;
  --stroke-contrast-100: #474747;
  --stroke-contrast-200: #4d4d4d;
  --stroke-contrast-300: #545454;
  --stroke-contrast-400: #5c5c5c;
  --stroke-contrast-500: #636363;
  --stroke-contrast-600: #737373;
  --success-100: var(--accent-green-100);
  --success-200: var(--accent-green-200);
  --success-300: var(--accent-green-300);
  --success-400: var(--accent-green-400);
  --success-500: var(--accent-green-500);
  --success-600: var(--accent-green-600);
  --text-base-400: #0f0f0f73;
  --text-base-500: #0f0f0fa6;
  --text-base-600: #0f0f0f;
  --text-base-action: var(--primary-500);
  --text-base-danger: var(--danger-500);
  --text-base-info: var(--info-500);
  --text-base-success: var(--success-500);
  --text-base-warning: var(--warning-500);
  --text-contrast-400: #ffffff73;
  --text-contrast-500: #ffffffb2;
  --text-contrast-600: #ffffff;
  --text-contrast-action: var(--primary-600);
  --text-contrast-danger: var(--danger-600);
  --text-contrast-info: var(--info-600);
  --text-contrast-success: var(--success-600);
  --text-contrast-warning: var(--warning-600);
  --utility-black: #0a0a0a;
  --utility-transparent: #ffffff00;
  --utility-white: #ffffff;
  --utility-shade-100: #0000000a;
  --utility-shade-200: #00000014;
  --utility-shade-300: #00000029;
  --utility-shade-400: #0000003d;
  --utility-shade-500: #00000052;
  --utility-shade-600: #00000070;
  --utility-tint-100: #ffffff80;
  --utility-tint-200: #ffffff99;
  --utility-tint-300: #ffffffb2;
  --utility-tint-400: #ffffffcc;
  --utility-tint-500: #ffffffe5;
  --utility-tint-600: #ffffff;
  --warning-100: var(--accent-amber-100);
  --warning-200: var(--accent-amber-200);
  --warning-300: var(--accent-amber-300);
  --warning-400: var(--accent-amber-400);
  --warning-500: var(--accent-amber-500);
  --warning-600: var(--accent-amber-600);
}

@media (prefers-color-scheme: dark) {
  :root {
/* Dark Base */
  /* color */
  --accent-amber-100: #d98b5633;
  --accent-amber-200: #d98b5673;
  --accent-amber-300: #c97438;
  --accent-amber-400: #b95c19;
  --accent-amber-500: #e9a375;
  --accent-amber-600: #e9a375;
  --accent-blue-100: #52a5e133;
  --accent-blue-200: #52a5e173;
  --accent-blue-300: #378ed9;
  --accent-blue-400: #1c77d2;
  --accent-blue-500: #6dbce8;
  --accent-blue-600: #6dbce8;
  --accent-brown-100: #d1914733;
  --accent-brown-200: #d1914773;
  --accent-brown-300: #bd7c2e;
  --accent-brown-400: #a86716;
  --accent-brown-500: #e6a65f;
  --accent-brown-600: #e6a65f;
  --accent-green-100: #1bb65e33;
  --accent-green-200: #1bb65e73;
  --accent-green-300: #179e55;
  --accent-green-400: #12874d;
  --accent-green-500: #20cd66;
  --accent-green-600: #20cd66;
  --accent-indigo-100: #8e97ee33;
  --accent-indigo-200: #8e97ee73;
  --accent-indigo-300: #7a7eec;
  --accent-indigo-400: #6565ea;
  --accent-indigo-500: #a3b0f0;
  --accent-indigo-600: #a3b0f0;
  --accent-pink-100: #ea70a633;
  --accent-pink-200: #ea70a673;
  --accent-pink-300: #e64984;
  --accent-pink-400: #e12161;
  --accent-pink-500: #ef98c9;
  --accent-pink-600: #ef98c9;
  --accent-purple-100: #bf81ed33;
  --accent-purple-200: #bf81ed73;
  --accent-purple-300: #b660e9;
  --accent-purple-400: #ad3ee5;
  --accent-purple-500: #c8a3f1;
  --accent-purple-600: #c8a3f1;
  --accent-red-100: #ea787033;
  --accent-red-200: #ea787073;
  --accent-red-300: #e65348;
  --accent-red-400: #e12d20;
  --accent-red-500: #ef9e98;
  --accent-red-600: #ef9e98;
  --accent-teal-100: #1cb0af33;
  --accent-teal-200: #1cb0af73;
  --accent-teal-300: #17999d;
  --accent-teal-400: #13828c;
  --accent-teal-500: #20c7c0;
  --accent-teal-600: #20c7c0;
  --accent-violet-100: #a68fef33;
  --accent-violet-200: #a68fef73;
  --accent-violet-300: #9773ec;
  --accent-violet-400: #8858e9;
  --accent-violet-500: #b5aaf2;
  --accent-violet-600: #b5aaf2;
  --alt-base-100: #c7c7c714;
  --alt-base-200: #c7c7c71f;
  --alt-base-300: #c7c7c729;
  --alt-base-400: #c7c7c73d;
  --alt-base-500: #c7c7c752;
  --alt-base-600: #c7c7c770;
  --alt-contrast-100: #c7c7c714;
  --alt-contrast-200: #c7c7c71f;
  --alt-contrast-300: #c7c7c729;
  --alt-contrast-400: #c7c7c73d;
  --alt-contrast-500: #c7c7c752;
  --alt-contrast-600: #c7c7c770;
  --danger-100: var(--accent-red-100);
  --danger-200: var(--accent-red-200);
  --danger-300: var(--accent-red-300);
  --danger-400: var(--accent-red-400);
  --danger-500: var(--accent-red-500);
  --danger-600: var(--accent-red-600);
  --fill-base-100: #0f0f0f;
  --fill-base-200: #141414;
  --fill-base-300: #1a1a1a;
  --fill-base-400: #1f1f1f;
  --fill-base-500: #242424;
  --fill-base-600: #292929;
  --fill-contrast-100: #292929;
  --fill-contrast-200: #2e2e2e;
  --fill-contrast-300: #333333;
  --fill-contrast-400: #383838;
  --fill-contrast-500: #3d3d3d;
  --fill-contrast-600: #424242;
  --info-100: var(--accent-teal-100);
  --info-200: var(--accent-teal-200);
  --info-300: var(--accent-teal-300);
  --info-400: var(--accent-teal-400);
  --info-500: var(--accent-teal-500);
  --info-600: var(--accent-teal-600);
  --primary-100: var(--accent-pink-100);
  --primary-200: var(--accent-pink-200);
  --primary-300: var(--accent-pink-300);
  --primary-400: var(--accent-pink-400);
  --primary-500: var(--accent-pink-500);
  --primary-600: var(--accent-pink-600);
  --stroke-base-100: #292929;
  --stroke-base-200: #333333;
  --stroke-base-300: #3d3d3d;
  --stroke-base-400: #474747;
  --stroke-base-500: #575757;
  --stroke-base-600: #666666;
  --stroke-contrast-100: #424242;
  --stroke-contrast-200: #4d4d4d;
  --stroke-contrast-300: #575757;
  --stroke-contrast-400: #616161;
  --stroke-contrast-500: #707070;
  --stroke-contrast-600: #808080;
  --success-100: var(--accent-green-100);
  --success-200: var(--accent-green-200);
  --success-300: var(--accent-green-300);
  --success-400: var(--accent-green-400);
  --success-500: var(--accent-green-500);
  --success-600: var(--accent-green-600);
  --text-base-400: #ffffff73;
  --text-base-500: #ffffffb2;
  --text-base-600: #ffffff;
  --text-base-action: var(--primary-500);
  --text-base-danger: var(--danger-500);
  --text-base-info: var(--info-500);
  --text-base-success: var(--success-500);
  --text-base-warning: var(--warning-500);
  --text-contrast-400: #ffffff73;
  --text-contrast-500: #ffffffb2;
  --text-contrast-600: #ffffff;
  --text-contrast-action: var(--primary-600);
  --text-contrast-danger: var(--danger-600);
  --text-contrast-info: var(--info-600);
  --text-contrast-success: var(--success-600);
  --text-contrast-warning: var(--warning-600);
  --utility-black: #0a0a0a;
  --utility-transparent: #00000000;
  --utility-white: #ffffff;
  --utility-shade-100: #0000001a;
  --utility-shade-200: #00000033;
  --utility-shade-300: #0000004d;
  --utility-shade-400: #00000066;
  --utility-shade-500: #00000080;
  --utility-shade-600: #00000099;
  --utility-tint-100: #c7c7c714;
  --utility-tint-200: #c7c7c71f;
  --utility-tint-300: #c7c7c729;
  --utility-tint-400: #c7c7c73d;
  --utility-tint-500: #c7c7c752;
  --utility-tint-600: #c7c7c770;
  --warning-100: var(--accent-amber-100);
  --warning-200: var(--accent-amber-200);
  --warning-300: var(--accent-amber-300);
  --warning-400: var(--accent-amber-400);
  --warning-500: var(--accent-amber-500);
  --warning-600: var(--accent-amber-600);
  }
}