/* Color templates */

:root{
  /* Directly copied from the color guide */
  --template-malang-PP:#FF91DB;
  --template-malang-FS:#F7E38F;
  --template-malang-RD:#70BCFF;
  --template-malang-AJ:#F5B96E;
  --template-malang-TS:#AD8CD9;
  --template-malang-TWI:#765C99;
  --template-malang-bg:#DBD8E9;
  --template-malang-text:#2F4575;
  --template-malang-outline:#FFFFFF;
  
  --template-hanmari-red:#C7303E;
  --template-hanmari-orange:#F19246;
  --template-hanmari-yellow:#FCC665;
  --template-hanmari-green:#41B46D;
  --template-hanmari-blue:#6683D0;
  --template-hanmari-violet:#514061;
  --template-hanmari-outline:#FFFFFF;
  
  /* Copied from refsheet */
  --character-hanmari-mane-red:#da183a;
  --character-hanmari-mane-orange:#ff8c2e;
  --character-hanmari-mane-blue:#6086d7;
  --character-hanmari-mane-green:#00b765;
  --character-hanmari-mane-lime:#c3cd22;
  --character-hanmari-mane-black:#363437;
  --character-hanmari-body:#fff6e2;
  --character-hanmari-eye-magenta:#ab2367;
  --character-hanmari-eye-pink:#ffb5c3;
  
  --character-leebyeori-mane-green:#bec427;
  --character-leebyeori-mane-gold:#af9623;
  --character-leebyeori-mane-brown:#aa6322;
  --character-leebyeori-body:#fec746;
  --character-leebyeori-magic:#faf67a;
  --character-leebyeori-eye:#fdc45a;
  
  /* Text colors*/
  /* Note: The dark/light refers to the lightness of the text. */
  /* Therefore, in LIGHT mode, the DARK text color should be used. */
  /* And in DARK mode, the LIGHT text color should be used. */
  --color-text-dark: var(--template-malang-text);
  --color-text-light: #FFF;
  --color-text-auto: light-dark(var(--color-text-dark),var(--color-text-light));
  --color-text-reversed: light-dark(var(--color-text-light),var(--color-text-dark));
  
  --color-sidebar-text-normal:#644a20;
  --color-sidebar-text-selected:var(--template-malang-text);
  --color-sidebar-text-hover:#101010;
  --color-sidebar-background:#ffe4bf;
  
  /* Background */
  --color-background-light: #F8F8F8;
  --color-background-dark: #202020;
  
  --color-background-auto:light-dark(
    var(--color-background-light),var(--color-background-dark));
  --color-background-reversed:light-dark(
    var(--color-background-dark),var(--color-background-light));
  --color-background-default:var(--color-background-auto);
  
  /* Borders */
  --color-embed-border-light: var(--template-malang-TS);
  --color-embed-border-dark: var(--template-malang-TS);
  --color-embed-border-auto: light-dark(
    var(--color-embed-border-light),
    var(--color-embed-border-dark));
  
  --color-embed-glow-light: var(--template-malang-TS);
  --color-embed-glow-dark: var(--template-malang-TS);
  --color-embed-glow-auto: light-dark(
    var(--color-embed-glow-light),
    var(--color-embed-glow-dark));
  
  /* Page specific: News */
  --color-bluesky-backdrop: var(--color-background-auto);
  --color-bluesky-text: var(--color-text-auto);
  
  /* Buttons */
  --color-button-bg: var(--color-background-default);
  --color-button-text: var(--color-text-auto);
  
  /* Timetable */
  --color-timetable-event-critical:  #F8FAB5;
  --color-timetable-vendor-main:     #FFCCFF;
  --color-timetable-vendor-pre:      #FF8ED6;
  --color-timetable-buffer:          #ECECEC;
  --color-timetable-long-running:    #AFFAD7;
  --color-timetable-panel-main:      #afe0ff;
  --color-timetable-panel-open:      #ffd1a9;
  --color-timetable-panel-sub:       #afe0ff;
  --color-timetable-night-show:      #e8ddff;
  
  /* Directions */
  --color-route-line5: #8B50A4;
  --color-route-line2: #33A23D;
  --color-route-bluebus: #363db6;
  --color-route-icn: #0ca5c7;
  --color-route-gmp: #06bc95;
  --color-route-railway: #005BAC; /* Official Korail color */
  --color-route-gsbus: #e13e61;
  
  
  
  /* External Brands */
  /* All colors were chosen arbitrarily if not commented otherwise. */
  
  /* Official #03CF5D */
  --color-naver-lighter:#cbf9d7;
  --color-naver-darker: #188d47;
  --color-naver-base: #03CF5D; /* = Official */
  --color-naver-auto: var(--color-naver-base);
  
  /* Official #FFCD00 */
  --color-kakao-lighter:#feffcb;
  --color-kakao-darker: #a2881f;
  --color-kakao-base: #FFCD00; /* = Official */
  
  /* Official #4285F4 */
  --color-google-lighter:#cde7ff;
  --color-google-darker:#1a63c2;
  --color-google-base:#4285F4; /* = Official */
  
  /* Picked from icon */
  --color-google-docs:#2684fc;
  --color-google-forms:light-dark(#7248b9,#a080e2); /* From icon: #7248b9 but it's too dark*/
  --color-google-slides:#ffba00;
  --color-google-sheets:#00ac47;
  
  /* Yes, they actually use #000 (Official) */
  --color-twitter-base:#000000;
  --color-twitter-white:#F9F9F9;
  --color-twitter-light-fg:rgb(15, 20, 25);
  --color-twitter-light-bg:#FFFFFF;
  --color-twitter-dark-fg:rgb(239, 243, 244);
  --color-twitter-dark-bg:#15202b;
  --color-twitter-auto:light-dark(
    var(--color-twitter-base),var(--color-twitter-white));
  
  /* Bsky doesn't seem have an official brand guideline.
   * Below values are from the website. */
  --color-bluesky-base:#0085FF;
  --color-bluesky-dark-bg:#151d28;
  --color-bluesky-light-bg:#FFFFFF;
  --color-bluesky-dark-fg:rgb(15, 115, 255);
  --color-bluesky-light-fg:rgb(0, 106, 255);
  --color-bluesky-auto:var(--color-bluesky-base);
  
  /* All official colors from brand kit */
  --color-discord-dark:#1f1f1f;
  --color-discord-blurple:#5865F2;
  --color-discord-light-blurple:#e0e3ff;
  --color-discord-black:#000000;
  
  
  --color-witchform-base: #fdff85; /* Website button color */
  --color-witchform-fg:#000; /* This is the value they use in their site */
  --color-witchform-bg:#FFF; /* This is the value they use in their site */
}